CSS의 배경 속성에 대한 자세한 설명

배경(배경)은 CSS의 매우 중요한 부분이자 CSS의 기본 지식 중 하나입니다. 이제 CSS2의 5가지 속성과 CSS3의 3가지 새로운 속성을 살펴보겠습니다. 속성과 2가지 기능.

CSS2_Background(백그라운드) 프리퀄

패밀리 구성원

백그라운드(백그라운드) 패밀리는 CSS2의 5가지 주요 배경 속성으로 구성됩니다.

background-color 　　　　　　指定填充的背景颜色
background-image 　　　　　　引用图片作为背景图
background-position　　 　　指定元素背景图片的位置
background-repeat 　　　　  决定背景图是不是平铺
background-attachment 　　 背景图是否滚动　　

주요 5인의 신원을 자세히 알고 싶다면 빨리 자리를 찾아 앉아서 내 자랑을 조용히 들어보세요!

배경색 배경색

단색으로만 배경을 채울 수 있는 멤버입니다.

background-color: colorName ;　

rrree

배경-이미지 배경 이미지

이 멤버를 사용하면 배경 이미지를 지정할 수 있습니다.

colorName的取值： 
　　　　（1）颜色名 ： red、green、blue、skyblue……
　　　　（2）rgb() ： rgb(255,255,255)、rgb(12,202,29)……
　　　　（3）十六进制颜色值 ： #000000、#ffffff、#ff6600……
　　　　 特别取值（默认）： 　　　　
　　   　　（4）透明 ： transparent;　　//背景透明　

모범 사례: (배경색)과 함께 사용하면 다음 상황에서 배경색을 채울 수 있습니다.

background-image:url(imagePath) ;     //imagePath指图片路径(相对路径和绝对路径)

배경 반복 배경 타일링

배경 이미지 설정 시 기본적으로 멤버는 이미지를 가로, 세로로 타일링하여 전체 상자를 덮게 됩니다.

　　　　a> 图片出不来(可能路径错、图片不存在)；
　　　　b> 图片被误删除；
　　　　c> 图片在不平铺的情况下覆盖不了整个盒子；

rrree

배경 위치 배경 위치 지정

이 멤버는 상자 내 배경 이미지의 위치, 즉 왼쪽 상단을 기준으로 배경 이미지의 왼쪽 상단 모서리 위치를 제어합니다. 상자 모서리.

background-repeat: propertyValue ;   //propertyValue指属性值

rrree

세 가지 기본 값 표현식이 있습니다.

propertyValue的取值：
　　　　(1)repeat :　　　　(默认)平铺
　　　　(2)no-repaet :　　 不平铺
　　　　(3)repeat-x :　　　水平方向平铺
　　　　(4)repeat-y :     垂直方向平铺

특별 참고 사항:

배경 위치 지정에 백분율을 사용하는 경우 브라우저는 이미지를 상자 크기의 백분율로 설정합니다. 위치 예:

background-position:X-coordinate Y-coordinate ;        //(水平方向坐标 垂直方向坐标)

background-attachment 배경 첨부

이 멤버는 배경 이미지가 고정되는지 아니면 페이지의 나머지 부분과 함께 스크롤되는지를 결정합니다.

属性的取值：
　　（1）百分比：10% ……
　　（2）像素值：10px ……
　　（3）方位名词：
　　　　　　水平方向：left right center
　　　　　　垂直方向：top bottom center　

rrree

CSS3_Background(백그라운드) postquel

CSS3는 백그라운드 패밀리에 3개의 새로운 멤버를 추가할 뿐만 아니라 2가지 중요한 기능을 백그라운드 패밀리로 확장합니다.

Knowledge Point Station:

CSS3의 리더는 W3C가 아니라, 나중에 W3C에서 채택한 주요 브라우저 제조업체로 구성된 WHATWG 조직입니다. 따라서 CSS3의 새로운 속성은 W3C에서 채택되기 전과 채택된 후에 다르게 작성됩니다.

W3C에서 채택되기 전에 브라우저가 이 속성을 지원하려는 경우 브라우저의 비공개 접두사(브라우저에서 사용하는 커널)를 추가하여 이것이 브라우저의 비공개 속성이지 그렇지 않음을 나타내야 합니다. 공식 W3C 속성입니다. 따라서 실제 작업에서는 다음과 같이 작성해야 합니다(예를 들어 Background-origin):

　　　background-position: left top ;
　　　background-position: 0px 0px ;
　　　background-position: 0% 0% ;

(1) New member of the family

배경부터 먼저 보세요 아주 잘생기고 예쁘고 신비로운 새 식구가 생겼어요:

으으으으

다음은 숙련된 운전자들이 운전할 시간이니까 꼭 앉아서 팔걸이를 잡아주세요 ! !

background-origin 배경 원점

이 멤버는 배경 이미지가 상자의 어느 부분을 기준으로 배치되는지 결정하며 일반적으로 background-position과 함께 사용됩니다.

기본적으로 배경 이미지는 상자의 패딩(패딩)을 기준으로 배치됩니다! 그러나 CSS3에서는 배경 이미지가 상자의 테두리와 내용을 기준으로 배치될 수도 있습니다.

background-position: 40% 50% ;
　　40%指:背景图在水平方向40%的位置，对应到该盒子水平方向40%的位置
　　50%指:背景图在垂直方向50%的位置，对应到该盒子垂直方向50%的位置

rrree

특별 참고 사항:

a> 이 멤버는 IE9에서 지원됩니다. Padding) + border(테두리) +
margin(margin); 배경크기 배경크기

배경 이미지는 회원이 결정합니다. 단, 이미지 자체의 크기는 원본 크기에 영향을 미치지 않습니다.

background-attachment:status     //背景依附状态

속성 값:

(1) 기본값: auto

status的取值：
　　（1）scroll ：  滚动(默认)，背景图会随着页面其余部分的滚动而滚动
　　（2）fixed ：　 固定，当页面的其余部分滚动时，背景图不会滚动
　　（3）inherit：  从父元素继承background-attachment属性的设置（很少用）

(2) 픽셀 값: px...

-webkit-background-origin: ;
-moz-background-origin: ;
-ms-background-origin: ;
-o-background-origin: ;  　　//加上浏览器私有前缀的写法
background-origin: ; 　　　　//W3C写法，必须带上

( 3) 백분율: 100% ……

background-origin 　　背景起源
background-size 　　  背景大小
background-clip 　　  背景裁切

　(4)cover　　

-webkit-background-origin: positionArea ;     //positionArea指定位区域
-moz-background-origin: positionArea ;
-ms-background-origin: positionArea ;
-o-background-origin: positionArea ;
background-origin: positionArea ;

　(5)contain

background-size:contain ; //在保证显示完整背景图的情况下，缩放背景图到与盒子等宽或等高

最佳实践：
   　　图片私有特性：只要设置图片宽高中的任何一个值，图片就会等比缩放，这样可以保证图片不变形不失真；
   　　因此，通常利用图片这一特性，在不知道图片等比例缩放尺寸的情况下，background-size只给图片宽高中的任何一个设置值，另外一个设置为auto。

background-clip  背景裁切

　　该成员规定背景（背景图or背景色）的绘制区域。

-webkit-background-clip : clipArea ; 　　　　//clipArea指绘制区域
-moz-background-clip : clipArea ;
-ms-background-clip : clipArea ;
-o-background-clip : clipArea ;
background-clip : clipArea ;

clipArea的取值：
　　（1）border-box : 　 　背景从盒子边框开始裁切 （默认）
　　（2）padding-box ：　　背景从盒子内边距开始裁切
　　（3）content-box : 　　背景从盒子内容开始裁切　

(二)家族扩展功能

　　瞧瞧css3都给背景家族扩展了哪两个功能！

　　　a> 多个背景图
　　　b> 背景渐变

　　感觉高大上的样子，到底是什么神秘功能，赶紧来一起分析分析！

多个背景图

　　css3中可以让一个元素盒子应用一个或多个图片作为背景，而且多个背景之间用逗号"，"隔开，而且图片按照书写顺序显示！

background:url(./images/01.png),url(./images/02.png),url(./images/03.png);

特别说明：

　　a> 从IE9开始支持；
   　　b> 不需要加上浏览器私有前缀；
   　　c> 如果content-box、padding-box和border-box一同设置，需要把content-box写在最前面，padding-box写在第二，border-box写在最后；

background:url(./images/01.png) content-box , url(./images/02.png) padding-box , url(./images/03.png) border-box;

　　注：在这里content-box、padding-box和border-box，既是background-clip的属性值，也是background-origin的属性值；

背景渐变

　　css3中可以让一个元素盒子设置背景色渐变，而不是单纯的只能设置纯色作为盒子的背景色或者指定图片作为盒子的背景！切记这里的背景渐变是背景色！背景色！不是背景图！！

（1）线性渐变　　

　　又称为直线渐变。

background-image:-webkit-linear-gradient(startLocal , color1 , color2 , color3);
background-image:-moz-linear-gradient(startLocal , color1 , color2 , color3);
background-image:-ms-linear-gradient(startLocal , color1 , color2 , color3);
background-image:-o-linear-gradient(startLocal , color1 , color2 , color3); 　//加上浏览器私有前缀的写法
background-image:linear-gradient(startLocal , color1 , color2 , color3); 　　//W3C写法

color1表示颜色值：

（1）如果后面没有加上百分比或者像素值：
　　　　a> color1将在起始位置显示；
　　　　b> color3将在最后位置显示；
　　　　c> color2将在中间等分点显示；
（2）如果后面加上百分比或者像素值，表示给颜色将在盒子的该位置显示；　

startLocal表示起始位置，可取值：

　　（1）方位名词：

top: 从上到下渐变(默认) 　　    (等价于to bottom)
left:从左到右渐变 　　　　　　  (等价于to right)
right:从右到左渐变 　　　　　　 (等价于to left)
bottom:从下到上渐变 　　　　　　(等价于to top)
top left:从左上角开始渐变

　　（2）度数degree:

       　　　　在背景渐变中，W3C和WHATWG的标准不一样：数轴不一样，起始位置不同，旋转方向不同。因此，度数是不一样的！具体：

           　　　　　　a> W3C中，0deg是在X轴（水平方向）的左边，顺时针旋转；
           　　　　　　b> WHATWG中，0deg是在Y轴（垂直方向）的下方，逆时针旋转；

　　　　　　

background-image:-webkit-linear-gradient(270deg, red, blue);
background-image:-moz-linear-gradient(270deg, red, blue);
background-image:-ms-linear-gradient(270deg, red, blue);
background-image:-o-linear-gradient(270deg, red, blue);
background-image:linear-gradient(180deg, red, blue); 　　　　/*deg 表示degree 度数*/

特别地，W3C不支持方位名词的写法，但是支持度数的写法

（2）径向渐变

　　又称圆心渐变

background-image:-webkit-radial-gradient(start_X start_Y , color1 , color2 , color3);
background-image:-moz-radial-gradient(start_X start_Y , color1 , color2 , color3);
background-image:-ms-radial-gradient(start_X start_Y , color1 , color2 , color3);
background-image:-o-radial-gradient(start_X start_Y , color1 , color2 , color3); 　//加上浏览器私有前缀的写法
background-image:radial-gradient(start_X start_Y , color1 , color2 , color3); 　　　//W3C写法

说明：径向渐变的起始位置的取值不支持度数的写法！

背景(background)后遗症

（一）背景(background)综合体

　　在css中，可以用background复合属性在一个声明中设置所有的背景属性（包括css3新增属性），而不用单独去写某个背景属性，可以设置的背景属性：

background-color 
background-position 
background-repeat 
background-attachment 
background-image
background-origin 
background-size 
background-clip

　　是不是感觉很牛逼，但是这里几个坑，值得我们注意！

（1）通常所说的background复合属性，是针对CSS2中5个背景属性而言，不包含CSS3中新增3个背景属性！

background: background-image background-repeat background-position background-attachment background-color ；

　　　　a> 不存在严格意义上的书写顺序（上面是老司机的书写顺序）；

   　　　　b> 如果某个属性没有书写，那么将自动采用默认值；

　那么background复合属性，为啥不包含CSS3中的3个属性呢？理由有下：

a> css2中的背景属性，已经得到各大浏览器支持，不存在兼容性，不需要写浏览器私有前缀！

b> css3中新增背景属性，存在一定兼容性，且需要带上各大浏览器的私有前缀才能得到支持！

（2）还记得CSS3给背景家族新增加多个背景图的功能么，该功能也是以background开头！

　　那么问题来了!

　　如果在一个元素中我们既要用background复合属性来简写CSS2的背景属性，又要添加多个背景图，怎么办？

a> 优先用background复合属性添加多个背景图；

b> 背景属性只能单独写，不能用background复合属性来简写!

c> 单独写的背景属性，必须写在background复合属性的后面！

　　肯定又有同学要问，为什么单独背景属性必须写在background复合属性之后?

css三大特性之层叠性!熟悉么？长江后浪推前浪，前浪死在沙滩上！

（二）关于background-image属性

　　这个家族成员比较牛逼，当然也比较复杂！

（1）可以覆盖多个背景图的background复合属性！

在同一个元素中：

　　将导致多个背景图效果失效

p{　　width:300px;　　height:300px;　　background:url(images/30/ab.png) content-box,url(images/30/xiaoming.jpg) padding-box; 　　background-image:url(images/30/ab.png);
}

在嵌套的父子级元素中：

　　a> 如果子元素的背景图尺寸小于父元素的尺寸，那么父元素的多个背景图效果的多余部分会显示出来！
　　b> 如果子元素的背景图尺寸大于等于父元素的尺寸，那么父元素的多个背景图效果会被覆盖！

p{　　width:300px;　　height:300px;　　background:url(images/30/ab.png) content-box,url(images/30/xiaoming.jpg) padding-box;
}p span{　　display: block;　　width:300px;　　height:300px;　　background-image: url(images/02.jpg);
}

（2）背景渐变与背景图共用background-image属性！

　　a> 在同一元素中，两者不能共存，谁在前面，谁先死;
   　　b> 在嵌套的父子级元素中，子元素的样式只会覆盖父元素的样式;

           （三）插入图片与背景图的区别

　　（1）插入图片占位；背景图不占位

　　（2）插入图片语义高，可以被搜索引擎收录到；背景图语义低，不可以被搜索引擎搜录到

　　（3）插入图片不容易定位；背景图容易定位，因为有background-position属性

　　（4）插入图片不可以用精灵图；背景图可以用精灵图

　　（5）插入图片有一个bug，下方带缝隙

（四）最佳实践

   　　（1）在同一个元素中，background复合属性写在前面，单独需要设置的背景属性写最后面；
           　　　　　　理由：长江前浪推后浪，前浪死在沙滩上

   　　（2）在同一元素中添加了多个背景图，其他背景属性只能单独写，不能在用复合属性简写；     

   　　（3）在嵌套的父子级元素中，不建议写同名属性
           　　　　　　理由：在子元素尺寸大于等于父元素尺寸的情况下，父元素的样式会被子元素覆盖；

   　　（4）在实际工作中，多用背景图，少用插入图片；

 

 

위 내용은 CSS의 배경 속성에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!