Bootstrap css背景图片的设置
一、 网页中添加图片的方式有两种
一种是:通过<img>标签直接插入到html中
另一种是:通过css背景属性添加
居中方法:水平居中的text-align:center 和 margin:0 auto 极客学院例子
http://www.jikexueyuan.com/course/656_3.html?ss=1
css背景图片的设置: http://paranimage.com/css-background-attribute/
概述
CSS2 中有5个主要的背景(background)属性,它们是:
* background-color: 指定填充背景的颜色。
* background-image: 引用图片作为背景。
* background-position: 指定元素背景图片的位置。
* background-repeat: 决定是否重复背景图片。
* background-attachment: 决定背景图是否随页面滚动。
多背景
新属性:背景修剪(background-clip)
新属性:背景原点(background-origin)
新属性: 背景尺寸(background-size)
新属性:(background-break)
背景色(background-color)的改进
背景平铺(background-repeat)的改进
背景附着(background-attachment)的改进
新属性:背景原点(background-origin)
这个属性和 background-position 结合起来使用。可以从边框,内补白或者内容盒子开始计算 background-position (类似于 background-clip)。
* background-origin: border-box;
以边框为原点开始计算 background-position.
* background-origin: padding-box;
以内补白为原点开始计算 background-position
* background-origin: content-box;
以内容盒子为原点开始计算 background-position
对于 background-clip 和 background-origin 不同的一个解释参看 CSS3.inf
Bootstrap css背景图片的设置的更多相关文章
- 利用wget 抓取 网站网页 包括css背景图片
利用wget 抓取 网站网页 包括css背景图片 wget是一款非常优秀的http/ftp下载工具,它功能强大,而且几乎所有的unix系统上都有.不过用它来dump比较现代的网站会有一个问题:不支持c ...
- css背景图片拉伸 以及100% 满屏显示
如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在 ...
- div css背景图片不显示
我们在写页面时,为了便于维护,css样式通常都是通过link外部导入html的,有时在css中写入背景图片时,此时背景图片的路径应该是相对css文件的.比如,此时的文件有index.html,css. ...
- CSS背景图片定位
原文:CSS背景图片定位 在网页开发中我们经常需要对图片进行分割(如下图)来使用,而不是分别提供单独的图片来调用,常见的如页面背景,按钮图标等,这样做的好处就是减少请求次数,节省时间和带宽. 对背景图 ...
- 【IE6的疯狂之八】链接伪类(:hover)CSS背景图片有闪动BUG
IE6下链接伪类(:hover)CSS背景图片有闪动BUG,主要原因ie会再一次请求这张图片,或者说图片没被缓存. 例如: CSS代码 a:hover{background:url(imagepath ...
- 【转】链接伪类(:hover)CSS背景图片有闪动BUG
来源:http://www.css88.com/archives/744 --------------------------------------------------------------- ...
- Python爬虫之提取Bing搜索的背景图片并设置为Windows的电脑桌面
鉴于现阶段国内的搜索引擎还用不上Google, 笔者会寻求Bing搜索来代替.在使用Bing的过程中,笔者发现Bing的背景图片真乃良心之作,十分赏心悦目,因此,笔者的脑海中萌生了一个念头:能否自 ...
- background-image 背景图片的设置
background-image 背景图片的设置 属性:background-image: url(img/banner.jpg); 1.设置背景图的宽度 background-size: 400px ...
- 兼容各浏览器的css背景图片拉伸代码
需要用到背景图拉伸,找到了下面这段css代码: filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='***.jpg' , s ...
随机推荐
- PHP入门 - - 07-->HTML的表单
一.<form>标签及其属性 <from></form>标签对用来创建一个表单,即定义表单的开始和结束位置,<form>标签具有下面等属性. ...
- Java ClassLoader基础及加载不同依赖 Jar 中的公共类
转载自:最新内容及最清晰格式请见 http://www.trinea.cn/android/java-loader-common-class/ 本文主要介绍 ClassLoader 的基础知识,Cla ...
- JS_ECMA基本语法中的几种封装的小函数
先来回顾一下我们的字符串: 字符串方法: str.length str.charAt(i):取字符串中的某一个; str.indexOf('e');找第一个出现的位置;找不到返回-1; str.l ...
- Git 使用命令
$ git add . $ git commit -m "html files created 20160308 16:08" $ git push origin master 设 ...
- appium运行报错.<init>(Lorg/openqa/selenium/remote/ErrorCodes;Z)V
最近这几天就在学习appium,搭建环境就耗费了很多时间,不得不承认自己够笨的了,然后我把环境搭建好,写完脚本的时候,就报这个错了,当时是从某个群里直接下载的demo,不得不吐槽说,够坑的,是能跑通, ...
- 项目新的需求,网页的自适应交付/响应式交付 Responsive/Adaptive Delivery
网页为什么要做自适应交付,皆因现在移动设备大行其道,现在是移动互联网时代,以IOS及Android为首的各种移动终端已经遍地开花. 当人家用380px的iphone打开你的网页时,你总不能显示个102 ...
- 测试你是否和LTC水平一样高[HDU1407]
测试你是否和LTC水平一样高Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total ...
- git 回滚
git reset --hard HEAD~10 可以通过上面的命令会退到最初的版本查看源代码, git reset --hard 4aa9a32d1625997ef5b28463ccde78d711 ...
- BZOJ2646 : neerc2011 flight
答案由$3$部分构成: $1$.抛物线的极值. $2$.询问区间的左端点在抛物线上的值. $3$.询问区间的右端点在抛物线上的值. 对于$1$,就是某个矩形范围内最大值查询,使用KD-Tree可以在$ ...
- BZOJ3764 : Petya的序列
首先如果一段连续子序列里没有任何幸运数,那么显然可以缩成一个点. 设幸运数个数为$m$,那么现在序列长度是$O(m)$的,考虑暴力枚举$R_1$,然后从右往左枚举$L_1$. 每次碰到一个幸运数,就将 ...