【CSS】背景基础知识

字数 2823阅读 410
92038-106.jpg

添加背景图

用 background-image 属性,在元素的背景中添加图形。
background-image属性有一个值:url,后面跟着放在括号里的图形文件路径。
路劲可以是绝对url,也可以是相对url。

在使用相对url时,如:
url(../images/bg.png)
../ 的作用是进入当前html文件的上一层目录。
images/ 的作用是进入“images文件夹”。
bg.png 指定要使用的图像文件。


image.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
默认值,会把图片从左到右,从上到下铺满整个背景。


image.png
background-image: url(images/quan.png);
background-repeat: repeat;

所用到的图片:

image



no-repeat

图像只显示一次,不进行平铺。是一个非常常用的值。


image.png
background-image: url(images/quan.png);
background-repeat: no-repeat;



repeat-x

沿着X轴横向平铺图像


image.png
background-image: url(images/quan.png);
background-repeat: repeat-x;



repeat-y

沿着Y轴竖向平铺图像


image.png
background-image: url(images/quan.png);
background-repeat: repeat-y;



round

round平铺图像的方式和repeat一样,不过不会裁剪图像。背景图不会被裁剪,而是被缩放,并排着一列列显示。为了做到这一点,浏览器会扭曲各个图像副本,因此会破坏图像的纵横比。


image.png
background-image: url(images/quan.png);
background-repeat: round;

由于我所用的背景图比较小,所以变形的效果不明显。
这次用的是Firefox浏览器。



space

space平铺图像的方式与repeat一样,但是不会裁剪图像的上部或下部。也就是说,space选项始终显示完整的图像。因此,浏览器会在平铺的各个图像副本之间添加间隙。


image.png
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。


image.png

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; 都是一样的,浏览器会自动识别关键字。

我习惯先写横向,再写纵向。

image.png
image.png
image.png
image.png
image.png





精确的值

可以使用 像素 或 em 来设定背景图的位置。
需要指定2个值,第一个值控制横向位置,第二个值控制纵向位置。
(第一个值指明图像的左边与容器的左边之间的距离,第二个值指明图像的上边与容器的上边之间的距离。)




image.png

background-position: 5px 20px;

值:坐负右正,上负下正。
可以使用负值,把背景图移出左边或上边,隐藏部分图像。

注意:使用像素或em尺寸时无法指定距离底边或右边的距离,如果要把背景图放在页面或目标元素的右下角,应该使用关键字(right bottom),或者使用百分比。





百分比值

使用百分比值,可以把背景图定位在与元素宽度成一定比例的某个点上。

但我从开发中得到的一个经验是:如果能使用精确的值(像素或em)或者关键字来实现所需的效果,就尽量不要使用百分比。因为百分比值在定位背景图很难处理。


background-position: 0% 0%;

image.png


background-position: 50% 50%;

image.png


background-position: 100% 100%;

image.png



看看下面我画的示意图就懂了


image.png

在(80% 20%)那里,背景图(80% 20%)的点和目标元素(80% 20%)的点是重合的,(50% 50%)和(100% 100%)也是这样。

所以说,如果能使用精确的值(像素或em)或者关键字来实现所需的效果,就尽量不要使用百分比。因为百分比值在定位背景图很难处理。





固定

可以使用 background-attachment 把背景图固定在某个位置,意思就是 背景图不随屏幕滚动而滚动。

background-attachment有2个属性:scroll 和 fixed 。

scroll是默认值,即背景图与文本和页面中的其他内容一起滚动。

fixed的作用是把被背景图固定在某个位置。比如想把页头部分固定在页面最顶端,不随页面滚动和滚动。


image.png

可以看到右侧滚动条不管怎么滚动,背景图依然是在左上角。

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:从边框的左上角开始放置背景图。


image.png

可以看出,背景图是在边框开始的。

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:从内边距的左上角开始放置背景图。浏览器一般使用这种方式放置背景图。

image.png

第一个定义的背景图是在边框内部的左上角。

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:从内容区域的左上角开始放置背景图。

image.png

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:让背景图只在内边距区域和元素的内容里面显示。


image.png

这时边框上是没有任何背景图的。

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:让背景图只显示在内容区里面。


image.png

注意我的代码是有 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;
image.png

让背景图完整的显示在内容区里面。

注意: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,高度自适应。


image.png



再如

width:300px;
height:150px;

这时,浏览器会找到150px,然后把图像的高度变成150px,宽度自适应。


image.png

cover:强制让图像的宽度适应元素的宽度,让图像的高度适应元素的高度。
cover和contain相反,cover会选择较大的那边做参考边。

width: 100px;
height: 200px;
image.png

因为height比width要大,所以背景图的高度和height设置的高度一样,背景图的宽度根据原图的比例进行放大。

再如

width:300px;
height:150px;
image.png

此时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】同时使用多个背景图

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
  • 一、HTML5 1.1 认识HTML5 HTML5并不仅仅只是作为HTML标记语言的一个最新版本,更重要的是它制定...
  • MPTCP,多连接的TCP连接。不知道看官们是否有过疑问,WIFI和4G能否同时使用呢?基于WIFI建立的连接,能...