添加背景图
用 background-image 属性,在元素的背景中添加图形。
background-image属性有一个值:url,后面跟着放在括号里的图形文件路径。
路劲可以是绝对url,也可以是相对url。
在使用相对url时,如:
url(../images/bg.png)
../ 的作用是进入当前html文件的上一层目录。
images/ 的作用是进入“images文件夹”。
bg.png 指定要使用的图像文件。
HTML代码:
<div class="div1"></div>
CSS代码:
.div1 {
width: 900px;
height: 500px;
background-image: url(images/bg0002.jpg);
}
三种书写方式
background-image: url(images/bg0002.jpg);
/* 路劲不加引号 */
background-image: url("images/bg0002.jpg");
/* 路劲放在双引号内 */
background-image: url('images/bg0002.jpg');
/* 路劲放在单引号内 */
以上三种书写方式都是有效的(我懒所以都不加引号)。
Web浏览器主要支持三种图片格式:GIF,JPEG,PNG。
这三种格式都有很好的压缩效果,因此在互联网中传输的速度更快。
现在还有一种比较流行的格式:SVG。
背景图的平铺方式
使用 background-repeat 来控制背景图的平铺方式。
分别有6个值可选:repeat,no-repeat,repeat-x,repeat-y,round,space。
repeat
默认值,会把图片从左到右,从上到下铺满整个背景。
background-image: url(images/quan.png);
background-repeat: repeat;
所用到的图片:
no-repeat
图像只显示一次,不进行平铺。是一个非常常用的值。
background-image: url(images/quan.png);
background-repeat: no-repeat;
repeat-x
沿着X轴横向平铺图像
background-image: url(images/quan.png);
background-repeat: repeat-x;
repeat-y
沿着Y轴竖向平铺图像
background-image: url(images/quan.png);
background-repeat: repeat-y;
round
round平铺图像的方式和repeat一样,不过不会裁剪图像。背景图不会被裁剪,而是被缩放,并排着一列列显示。为了做到这一点,浏览器会扭曲各个图像副本,因此会破坏图像的纵横比。
background-image: url(images/quan.png);
background-repeat: round;
由于我所用的背景图比较小,所以变形的效果不明显。
这次用的是Firefox浏览器。
space
space平铺图像的方式与repeat一样,但是不会裁剪图像的上部或下部。也就是说,space选项始终显示完整的图像。因此,浏览器会在平铺的各个图像副本之间添加间隙。
background-image: url(images/quan.png);
background-repeat: space;
放大图片和repeat的图对比,可以看出使用space的图,圈圈之间是有一定空隙的。
这次用的是Firefox浏览器。
注意:在做这个笔记的时候(2017.11)round和space的兼容性都很差。并不是所有浏览器都兼容。
定位背景图
background-position
用 background-position 属性控制图像位置。可以通过 关键字、具体的值、百分比 来控制背景的横向和纵向的起点。
关键字
横向:left,center,right。
纵向:top,center,bottom。
HTML代码:
<div class="div1"></div>
CSS代码:
.div1 {
width: 900px;
height: 500px;
border: 1px solid #000;
background-image: url(images/quan.png);
background-repeat: no-repeat;
background-position: center;
}
那个圈圈的背景图就会出现在div中央。因为 background-position 设置了 center。
如果只写一个 center,浏览器会解析为 x轴 和 y轴 都用了center属性,所以纵横都是居中。
在使用关键字时,定义横向和纵向的顺序不重要。如 background-position:top right; 和 background-position: right top; 都是一样的,浏览器会自动识别关键字。
我习惯先写横向,再写纵向。
精确的值
可以使用 像素 或 em 来设定背景图的位置。
需要指定2个值,第一个值控制横向位置,第二个值控制纵向位置。
(第一个值指明图像的左边与容器的左边之间的距离,第二个值指明图像的上边与容器的上边之间的距离。)
如
background-position: 5px 20px;
值:坐负右正,上负下正。
可以使用负值,把背景图移出左边或上边,隐藏部分图像。
注意:使用像素或em尺寸时无法指定距离底边或右边的距离,如果要把背景图放在页面或目标元素的右下角,应该使用关键字(right bottom),或者使用百分比。
百分比值
使用百分比值,可以把背景图定位在与元素宽度成一定比例的某个点上。
但我从开发中得到的一个经验是:如果能使用精确的值(像素或em)或者关键字来实现所需的效果,就尽量不要使用百分比。因为百分比值在定位背景图很难处理。
如
background-position: 0% 0%;
background-position: 50% 50%;
background-position: 100% 100%;
看看下面我画的示意图就懂了
在(80% 20%)那里,背景图(80% 20%)的点和目标元素(80% 20%)的点是重合的,(50% 50%)和(100% 100%)也是这样。
所以说,如果能使用精确的值(像素或em)或者关键字来实现所需的效果,就尽量不要使用百分比。因为百分比值在定位背景图很难处理。
固定
可以使用 background-attachment 把背景图固定在某个位置,意思就是 背景图不随屏幕滚动而滚动。
background-attachment有2个属性:scroll 和 fixed 。
scroll是默认值,即背景图与文本和页面中的其他内容一起滚动。
fixed的作用是把被背景图固定在某个位置。比如想把页头部分固定在页面最顶端,不随页面滚动和滚动。
可以看到右侧滚动条不管怎么滚动,背景图依然是在左上角。
CSS代码:
background-image: url(images/logo0001.png);
background-repeat: no-repeat;
background-attachment: fixed;
动图好像简书无法显示~~ 可以在我的订阅号查看这个笔记:Rabbit_svip
定义背景图的起点与区域
可以使用 background-origin 属性重新定义图像的起点。
这个属性能告诉浏览器从元素的边框、内边距还是内容区域开始显示背景图。
background-origin 有三个属性:border-box、padding
-box、center-box。
border-box:从边框的左上角开始放置背景图。
可以看出,背景图是在边框开始的。
HTML代码:
<div class="div1"></div>
CSS代码:
.div1 {
width: 300px;
height: 300px;
border: 10px dashed #000;
background-image: url(images/quan.png);
background-origin: border-box;
}
padding-box:从内边距的左上角开始放置背景图。浏览器一般使用这种方式放置背景图。
第一个定义的背景图是在边框内部的左上角。
HTML代码:
<div class="div1"></div>
CSS代码:
.div1 {
width: 300px;
height: 300px;
border: 10px dashed #000;
background-image: url(images/quan.png);
background-origin: padding-box;
}
content-box:从内容区域的左上角开始放置背景图。
HTML代码:
<div class="div1">content</div>
CSS代码:
.div1 {
width: 300px;
height: 300px;
border: 10px dashed #000;
background-image: url(images/quan.png);
background-origin: content-box;
}
background-clip 属性是 background-origin 的一个好搭档。
background-clip 也是有3个值:border-box、padding-box、content-box。
border-box:让背景图只显示在内容和边框的里面。只有边框有间隙时才可以注意到(如虚线)。浏览器一般以这种方式来显示。
这里就不再举例了。
padding-box:让背景图只在内边距区域和元素的内容里面显示。
这时边框上是没有任何背景图的。
HTML代码:
<div class="div1">content</div>
CSS代码:
.div1 {
width: 300px;
height: 300px;
border: 10px dashed #000;
background-image: url(images/quan.png);
background-origin: padding-box;
background-clip: padding-box;
}
content-box:让背景图只显示在内容区里面。
注意我的代码是有 10px 的 padding。
HTML代码:
<div class="div1">content</div>
CSS代码:
.div1 {
width: 300px;
height: 300px;
border: 10px dashed #000;
background-image: url(images/quan.png);
background-origin: padding-box;
background-clip: content-box;
}
我经常用的搭配方式:
background-origin: content-box;
background-clip: content-box;
让背景图完整的显示在内容区里面。
注意:IE8及之前的版本都不支持 background-origin 和 background-clip 属性。
缩放背景图
通过 background-size 属性可以控制背景图的尺寸。
background-size可以通过 精确的值、百分比、关键字 来控制。
精确的值
background-size: 100px 200px;
第一个值控制 宽 , 第二个值控制 高。
通过精确值控制,有可能会改变图片原有的长宽比例。
精确值还可以结合另一种方法控制背景图。
background-size: 100px auto;
把背景图的宽度变成100px,高度随宽度自适应。
即:只设置宽度或高度,另一个值设为 auto。
根据高度或者宽度,浏览器会根据图像的纵横比自动设置另一个值,因此图像不会扭曲。
百分比
通过百分比控制宽度和高度,用法和精确的值是一样的。
background-size: 100% 100%;
会使背景图铺满整个载体容器。使用百分比来控制背景图大小,也很容易把图像扭曲。
关键字
contain、cover。
contain:会根据元素的背景尺寸强制调整图像的尺寸,而且会保留图像的纵横比。
使用contain时,浏览器会找到载体容器比较小的一条边。
比如
width: 100px;
height: 200px;
这时,浏览器就会找到100px,然后把图像的宽变成100px,高度自适应。
再如
width:300px;
height:150px;
这时,浏览器会找到150px,然后把图像的高度变成150px,宽度自适应。
cover:强制让图像的宽度适应元素的宽度,让图像的高度适应元素的高度。
cover和contain相反,cover会选择较大的那边做参考边。
如
width: 100px;
height: 200px;
因为height比width要大,所以背景图的高度和height设置的高度一样,背景图的宽度根据原图的比例进行放大。
再如
width:300px;
height:150px;
此时width比height大,所以背景图的宽度等于width,背景图的高度随原图的比例进行放大。
注意,contain 和 cover 都不会改变原图的比例。
简写方式
background: url(quan.png) center center / 50% no-repeat fixed #FFF;
翻译一下:
background: 文件路劲(url) 定位(position:center) / 大小(size:50%) 平铺方式(repeat) 固定方式(fixed) 背景色(#FFF);
如果指定位置(background-position: center) 和 background-size 属性,二者中间要加上 / 符号。
注意:IE8不支持 background-size、background-origin 和 background-clip 属性。如果在简写的 background 属性中设置这几个属性,IE8会忽略整个生命,不应用在任何背景属性。
在简写的时候不是所有属性都要全部指定,而且通常不会全部指定。可以只指定一个属性,或者任意组合各个属性。
简写时的其他注意事项:
background-color: yellow;
background: url(quan.png) no-repeat;
这时,黄色背景是完全看不到的。因为在第二行代码中用了简写方式,浏览器遇到没有指定颜色的background属性(简写)时,会把 background-color 设为 transparent(透明),从而把上一行 background-color 属性覆盖掉。
解决方法:
background: url(quan.png) no-repeat;
background-color: yellow;
把“详细属性”放在“简写属性”后面,只会覆盖“简写属性”的部分值。所以在使用简写属性的时候,一定要注意书写顺序!
HTML与CSS 目录:HTML与CSS
上一篇:【CSS】着色与透明
下一篇:【CSS】同时使用多个背景图