环球快消息！手把手带你了解CSS（背景属性（Background））

大家好,综合小编来为大家讲解下环球快消息！手把手带你了解CSS，背景属性，Background这个很多人还不知道,现在让我们一起来看看吧！

希望对大家有帮助！

1.背景属性：一次性定义背景相关属性的八个关键点：背景颜色、背景图像位置、背景图像大小、背景图像重复、背景图像定位位置、背景绘制区域、背景图像固定和滚动、要使用的背景图像继承(1)一个元素，多种背景图像浏览器支持。

[资料图]

IE8和更早的浏览器不支持指定背景图像的资源地址浏览器支持背景属性“inherit”。

【推荐学习：css视频教程】backgroundbackground速记属性background属性包含八个其他背景属性(4)background的属性值Background包含八个其他背景属性(1)可以设置以下属性和属性值：多个属性值之间的空格分隔背景图层：当指定多个背景图层时，

不要继承no而试图使用background属性。

设置背景技能：建议使用缩写属性，不要使用单属性。老浏览器的支持不错：这个缩写属性在老浏览器中可以得到更好的支持。代码更少：需要输入的字母更少。

版本背景缩写为background。

CSS1CSS3JavaScriptlanguagesyntaxforshorthandbackground.

对象。风格。background='whiteURL(纸。gif)重复-y'背景简写背景的浏览器支持

背景色：color_namered|hex_number#ff0000|RGB_numberRGB(255，0，0)|透明|继承；语法示例

colorname:colorname

颜色值是颜色名称的背景色(如红色)。十六进制：十六进制数

十六进制值的背景色(例如，#ff0000)。rgb:rgb()，rgba()

颜色值是rgb码的背景色(比如rgb(255，0，0))hsl:hsl()，hsla()。

透明(无色，默认值):透明。

背景颜色是透明的。这种颜色看起来像背景色。技术上是最小alpha通道的黑，是rgba(0，0，0，0)的简称。严格来说，透明色也是一种颜色。继承：继承。

从父元素继承背景色属性的设置(5)背景色继承不继承No(6)背景色css版本CSS1(7)JavaScript语法对象。风格。Backgroundcolor='#00ff00'(8)背景色与可访问性问题对比度：为了保证背景色与文字颜色的对比度足够高，

perceptual-Accessibility|MDN(英文版待译)提供了关于如何编写网页内容的实用建议。

使其符合web内容可访问性指南(WCAG)2.0和2.1的可感知原则中列出的成功标准。感知状态：是指用户必须能够以某种方式感知它，使用他们的一种或多种感官。

背景图像和背景颜色图像覆盖在颜色上方：背景图像，覆盖在背景颜色的上面.背景的统一颜色，背景色是在指定的背景图像后呈现的尽管颜色仍然可以通过图像中的任何透明度看到。

背景颜色background-color的浏览器支持示例1:同时显示背景图像和背景颜色

背景图像，覆盖在背景颜色的上面.css

.bgimg-fixed{background-color:pink;background-image:url(./images/四叶草背景.png);background-repeat:no-repeat;}示例2:把十六进制值的颜色，设置了透明值.(最后两位，每位的值：0-f)改变透明度(即最后多加的两位的值),颜色也会随之改变)00:完全透明了，看不到颜色，跟没设置颜色一样.ff:就是纯红色了，相当于没加透明值./*把十六进制设置了透明值的红色，最后两位的33就是透明值*/background-color:#ff000066;background-image:url(./images/四叶草背景.png);background-repeat:no-repeat;}3.background-image属性：背景图像(范围到内边距区的外边缘，不含边框)背景图像：

为一个元素设置一个或多个背景图像。background-image属性背景图像属性元素的背景范围

背景色：background-color

背景色默认到边框区的外边缘边框区的下方会显示背景色，虚线边框的话，可以直接看到边框下的背景色

背景图像：background-image

背景图像不重复时(background-repeat:no-repeat;),图像默认在内边距区的外边缘不在边框区，也不会显示在边框的下方(特意加粗的边框，下方没有背景图像).

背景图像的位置

元素的左上角：默认地，背景图像的位置位于元素的左上角重复：在水平和垂直方向上重复背景图像的语法

background-image:none|url('URL')|inherit;背景图像的属性值关键点：路径url不显示继承图像路径/地址：url('URL')指向图像的路径，简单的静态图像，

在元素的背景中设置一个图像图像的重复方式：background-repeat

可以沿着某个轴（x轴或y轴）平铺重复，或者根本不重复。图像的位置：background-position

根据background-position属性的值放置。图像/背景色的裁剪/绘制区域：background-clip

多背景图像的使用逗号分隔：一个background-image指定多个背景图像，用逗号，分隔多个背景地址.z方向堆叠：在绘制时，图像以z方向堆叠的方式进行。

代码在前，显示在上：先指定的图像会在之后指定的图像上面绘制。因此指定的第一个图像“最接近用户”。和背景图像的相对位置

边框在背景图像之上：元素的边框border会在背景图像之上被绘制背景颜色在背景图像之下：背景颜色background-color会在背景图像之下绘制。

位置关系：边框(最上方，最接近用户)背景图像背景颜色背景图像无法覆盖边框背景颜色无法覆盖背景图像图像和盒子：

示例1:同时设置两个背景图片#lizard{background-image:url('./images/lizard.png'),url('./images/star.png');}两个都是矢量图，图片背景都是透明的代码在前，显示在上：代码在前面的图像，显示在上方.如果背景图像的背景不是透明的(比如其他部分是白色透明色),可能会完全遮盖会下方的图像.

示例2:同时设置两个背景图像，并分别设置不同的重复方式.#lizard{background-image:url('./images/四叶草背景.png'),url('./images/lizard.png');background-repeat:no-repeat,repeat;}背景不透明的遮盖性：因为四叶草不是背景透明的图片(整个图片的其余部分是白色).所以除了四叶草，其余部分也遮盖了一部分下方的图像.关联知识：css图像数据类型CSS的图像数据类型描述的是2D图形。

一个imageCSS图像数据类型的分类=|||||使用url()方法：(常用，熟记)用url引用的图像gradient相关的方法生成的图像(常用，熟记)element()方法：(实验中方法)页面的一个部分，

image()函数(实验中方法)由image()函数定义的一种图像、图像片段或颜色的实色块

cross-fade()函数由cross-fade()函数定义的两个或多个图像的混合。

image-set()函数根据image-set()函数定义的分辨率进行选择的图像。图像类型值的浏览器支持

更多详情：CSS图像数据类型

有效的图像引用值：/*url()方法，只要test.jpg是图像文件*/url(test.jpg)/*一个标签*/linear-gradient(tobottom,blue,red)/*页面的一部分，使用了element()方法，如果colonne3是存在于页面中的一个元素id即可*/element(#colonne3)image(ltr'arrow.png#xywh=0,0,16,16',red)/*的一个16x16节，

背景图像会随着页面其余部分的滚动而移动。跟着元素一起滚动：(但如果这个元素内部的内容是可滚动的，不跟元素的内容一起滚动)背景相对于元素本身固定(跟着元素一起滚动)，

而不是随着元素的内容滚动（对元素边框是有效的，因为它实际上附加在元素的边框上）。

(注意区分：相对于元素，还是相对于元素的内容，因为有的元素不仅仅会随着页面滚动，元素本身也可能是可滚动的，且有一个滚动条.)固定：fixed

不跟元素(或元素的内容)一起滚动元素滚动时，背景图像的位置不变元素滚动后，如果元素内容的位置，不在背景图像覆盖的位置，那么针对这个元素设置的背景图像就不会再显示.相对于元素内容固定：local

表示背景相对于元素的内容固定。跟着元素一起滚动：如果一个元素拥有滚动机制，背景将会随着元素的内容滚动，并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。

继承父元素：inherit

(听爸爸的话…)背景图像附着语法background-attachment:scroll|fixed|local|inherit;/*Keywordvalues*/background-attachment:scroll;background-attachment:fixed;background-attachment:local;/*Globalvalues*/background-attachment:inherit;background-attachment:initial;background-attachment:unset;背景图像附着继承性不继承nobackground-attachment的版本CSS1背景图像附着的JavaScript语法object.style.backgroundAttachment='fixed'背景图像附着background-attachment的浏览器支持

注释：任何版本的InternetExplorer（包括IE8）都不支持属性值“inherit”。

示例1:背景图像显示在固定位置，不跟元素一起随着页面滚动css.bgimg-fixed{background-image:url(./images/四叶草背景.png);background-attachment:fixed;background-repeat:no-repeat;}html《花儿为什么这样红》是电影《冰山上的来客》中的一首著名插曲，

背景图像一直显示在固定的位置：fixed

元素内容滚动时，背景图像的位置不变元素内容滚动后，如果元素内容的位置，不在背景图像覆盖的位置，那么针对这个元素设置的背景图像就不会再显示.跟着元素一起滚动：scroll(默认值)

示例2:多背景图支持

background-attachment属性支持多张背景图片。对应对个背景图片：用逗号分隔来为每一张背景图片指定不同的background-attachment。

顺序对应：每一张背景图片顺序对应相应的background-attachment类型。css

.bgimg-fixed{background-image:url(./images/greenbgimage.jpg),url(./images/四叶草背景.png);background-attachment:fixed,scroll;background-repeat:no-repeat,repeat-y;}5.background-position属性：背景图像的位置(先水平，后垂直，关键词，百分比，长度值)背景图像的位置：为每一个背景图片设置初始位置。

长度xposypos相对于：左边缘的x坐标，相对于上边缘的y坐标两个值：先水平，

后垂直，省略一个是居中50%水平位置：xpos第一个值垂直位置：ypos第二个值左上角：00。单位像素(0px0px)其他的CSS单位。

混合使用：百分比，关键词和长度%和position值。属性值的数目

两个值：单个背景图像一般都是两个值(x,y),先指定水平位置，

后指定垂直位置.一个方向指定一个值即可，所以toptop和leftleft是无效的.一个值：只有一个值，第二个值默认是居中属性值的分隔

可以为多个背景图像的指定位置值，用逗号，隔开。属性值的正负：图片位移方向

正值：将图片相对容器右移和下移(右下)负值：将图片相对容器左移和上移(左上)背景图像位置的浏览器支持

示例1:背景图像的位置只写一个属性值，来指定位于中上方.bgimg-fixed{background-color:#c0c0c0;background-image:url('./images/star.png');background-repeat:no-repeat;/*top=centertop*/background-position:top;}只指定一个方向上的值另一个方向上的值默认是居中.top=centetopleft=leftcenter示例2:只指定一个百分比值，默认是水平方向的，另一个垂直方向，默认居中50%10%=10%50%.bgimg-fixed{background-color:#c0c0c0;background-image:url('./images/star.png');background-repeat:no-repeat;/*10%=10%50%*/background-position:10%;}示例3:同时指定两个方向的位置，比如，右下方.bgimg-fixed{background-color:#c0c0c0;background-image:url('./images/star.png');background-repeat:no-repeat;/*关键字不分先后顺序*/background-position:rightbottom;}关键字的位置名，不分先后顺序因为从名字上，就能看出是水平方向的还是垂直方向的.示例4:同时指定关键字的位置名和长度值/百分比值，指明距离上下左右边缘的的距离.距离右边缘10px,距离下边缘60pxbackground-position:right10pxbottom60px;长度值换成百分比值，同样有效，也是指定距离值.关键字后面不指定距离值，默认就是紧贴着边缘的.也可以只为一个方向指定距离值right10pxbottom,这样也合法.bgimg-fixed{background-color:#c0c0c0;background-image:url('./images/star.png');background-repeat:no-repeat;/*关键字不分先后顺序，距离右边缘10px,距离下边缘60px*/background-position:right10pxbottom60px;}更多距离值分析图：一个位置的多种写法top75pxleft100x=left100pxtop75px(可以调换关键字位置名的顺序，距离值要保持在位置名后方)bottomleft25%=top100%25%bottom=top100%left25%=25%right=rightcenter=left100%center=left100%top50%right=left100%垂直center=top50%=bottom50%示例5:同时指定两个背景图像的位置和重复方式.bgimg-fixed{background-color:#c0c0c0;background-image:url('./images/star.png'),url('./images/四叶草背景.png');background-repeat:no-repeat,no-repeat;background-position:rightbottom100px,left10pxbottom30px;}示例6:设置背景图像位置的负值负值：图像向相反方向位移.bgimg-fixed{background-color:#c0c0c0;background-image:url('./images/star.png'),url('./images/四叶草背景.png');background-repeat:no-repeat,no-repeat;background-position:rightbottom-30px,left-30pxbottom-30px;}6.background-repeat属性：背景图像的重复方式(单值，双值，超出部分裁剪)背景图像的重复方式设置是否及如何重复背景图像background-repeat属性定义背景图像的重复方式。

双向重复(默认值):repeat

背景图像将在垂直方向和水平方向都重复。图像会按需重复来覆盖整个背景图片所在的区域.不合适会被裁剪：最后一个图像，如果它的大小不合适的话，会被裁剪.

最右边的被裁剪了，最下方漏出来的一点，也可以看出是被裁剪的.

水平重复：repeat-x

背景图像将在水平方向重复。不合适会被裁剪：最后一个图像，如果它的大小不合适的话，会被裁剪.可以看到右边缘的地方，图像被裁剪了.

垂直重复：repeat-y

背景图像将在垂直方向重复。不合适会被裁剪：最后一个图像，如果它的大小不合适的话，会被裁剪.可以看到下边缘的地方，图像被裁剪了

不重复：no-repeat

背景图像将不重复，仅显示一次。会被裁剪：背景图像本身大小太大，超出了元素的边框，会被裁剪.没有被重复的背景图像的位置：是由background-position属性来决定.

重复部分的图像不会被裁剪：space

图像会尽可能得重复，但是不会裁剪.

重复的图像不会被裁剪：重复的图像，超出元素边框，就会把超出的部分去掉，放大其余的部分来填充(不会进行裁剪式的重复)

固定在元素边缘上：第一个和最后一个图像会被固定在元素的相应的边上，空白的均匀分布：同时空白会均匀地分布在图像之间.

背景图像本身大小超出元素大小：背景原图像本身的大小，就超出元素边框了，则进行裁剪.

space值排斥的属性：

background-position图像定位属性会被忽视，压缩显示图像(不裁剪):round

图像的伸展和压缩：随着元素的大小的增长，被重复的图像将会伸展(没有空隙),直到有足够的空间来添加一个图像时，添加一个新的图像，压缩其他图像，来显示新的图像.不裁剪：通过伸展和压缩，显示完整图像，不裁剪图像.添加图像和图像压缩：当下一个图像被添加后，所有的当前的图像会被压缩来腾出空间.本来是放不下两个完整的图像的(背景图像本身比较大),浏览器把图像压缩后，就能放下两个完整的图像了.

添加图像：留白=图像宽度的一半时，添加另一个图像。继承父亲：inherit

从父元素继承background-repeat属性的设置。背景图像重复background-repeat属性和属性值浏览器支持

示例1:把背景图像设置成roundspace和round=roundround的区别

#lizard{/*background-image:url('./images/lizard.png');*/background-image:url('./images/四叶草背景.png');background-repeat:roundspace;}默认时的背景显示=双向重复repeat

可以看到右边和下边缘都有被裁剪

值为：roundspace时

水平方向：压缩图像显示完整图像垂直方向：有超出不裁剪的部分去掉，伸展剩下的图像，空白均匀分布.可以看到背景会重复时，水平和垂直方向，都没有被裁剪的部分.

值为：round=roundround时

可以看到垂直方向的背景，比上面的space值多了一行图像.因为round值通过压缩其余的图像，多显示了一行，而不只是去掉图像被裁剪的部分.裁剪的区别：space会因为背景图像本身大小超出元素大小时(不是因为图像的重复),被裁剪，但round一直都不会被裁剪，因为会压缩图像来显示.

7.CSS3background-clip属性：背景色/图像的绘制/裁剪区域(背景显示的区域)背景裁剪区域/绘制区域设置背景的绘制区域/背景被裁剪区域背景显示区域：显示给用户看的区域，其他部分就算有背景，裁剪掉了，也看不到.background-clip属性背景裁剪属性没有设置背景(即没有设置背景图像background-image或背景颜色background-color)视觉效果：则背景裁剪区域background-clip仅在边框具有透明区域或部分不透明区域(根据边框样式border-style或边框图像border-image)时才具有视觉效果；否则，

关键点：边框盒内边距框内容框文字

边框盒(默认):border-box

背景被裁剪到边框盒。背景延伸到边框的外部边缘(但在z顺序中是在边框的下面)。边框显示在背景上方：如果边框是虚线，

背景会从下方透出来.包括：边框内边距框：padding-box

背景被裁剪到内边距框。背景延伸到内边距的外部边缘。不包括：边框边框的下面没有背景。内容框：content-box

背景被裁剪到内容框。背景是在内容框内绘制的。不包括：边框和内边距文字：text(尚在实验中的属性)

把背景显示成文本的颜色.使用前提：需要浏览器前缀文本装饰或阴影不包括在裁剪区域中文字的颜色：一定要设置成color:transparent透明色这样才能在文字里，显示出后面的背景色/图像，否则会被文字原本的颜色遮挡住背景色/图像.盒子模型分界图从内到外的顺序：内容区内边距区边框区外边距区

背景色/图像的裁剪/绘制区域的浏览器支持IE9+才开始支持，IE8以及更早的版本不支持background-clip属性。

黄色：需要浏览器前缀低版本的浏览器也需要浏览器支持，这是个比较新的属性.

示例1:把背景的裁剪/绘制区域分别设置为到边框的外边缘，内边距的外边缘，内容区，文字的内部

html

天道酬勤，是一个汉语成语，读作tindochuqn。意思是上天会按照每个人付出的勤奋，给予相应的酬劳。多一分耕耘，多一分收获，只要你付出了足够的努力，

将来也一定会得到相应的收获。出自《花儿为什么这样红》中的卦辞。

css#clipTest{/*设置元素的外边距边框内边距字体大小/颜色/粗细*/margin:20px;border:10pxdashed#000;padding:20px;font-size:1.2em;font-weight:bold;color:#fff;/*设置背景图像和背景颜色(作为背景图像的回退)*/background-color:#c0c0c0;background-image:url('./images/hand.jpg');/*设置背景的绘制/裁剪区域*//*到边框区的外边缘*/background-clip:border-box;}到边框的外边缘：border-box可以看到显示在边框的下面，因为边框是虚线，所以可以看到漏出来的一部分背景图background-image.对背景色background-color,也是有效的.到内边距区的外边缘：background-clip:paddi

比较新的属性,需要使用浏览器前缀

①宽高长度值:宽x高

②宽高百分比值:width%height%

③裁剪式完全覆盖背景区:cover

④不裁剪式完全覆盖背景区:contain

⑤按图片比例自动缩放:auto

▲多个值:若要指定多个背景图像的大小，请使用逗号,分隔每个背景图像的值。

⑹背景图像大小background-size的浏览器支持

示例1:如果您使用渐变作为背景并指定了背景尺寸background-size

安全值示例

（学习视频分享：web前端入门）

本文到此分享完毕，希望对大家有所帮助。

　　免责声明：本文由用户上传，与本网站立场无关。财经信息仅供读者参考，并不构成投资建议。投资者据此操作，风险自担。 如有侵权请联系删除！