css中background系列详解

灰太狼 2022-05-22 23:20 240阅读 0赞

研究了background相关的属性，虽然很简单，但有些还是不知道，整理出来系统的学习一下，也会更好的掌握这些知识点（细节决定成败，哈哈）

background相关的属性有（把比较常用的放在前面不做过多的解释）：background、background-color、background-image、background-repeat、background-attachment、background-origin、background-blend-mode、background-clip、background-position、background-size、background-position-x、background-position-y

background 简写属性在一个声明中设置所有的背景属性。所有浏览器都支持该属性

可以设置的值有：

*  background-color：设置元素的背景颜色
 *  background-position：设置背景图像的起始位置
 *  background-size：设置背景图像的尺寸
 *  background-repeat：设置是否及如何重复背景图像
 *  background-origin：background-position 属性相对于什么位置来定位。
 *  background-clip：规定背景的绘制区域
 *  background-attachment：设置背景图像是否固定或者随着页面的其余部分滚动
 *  background-image：为元素设置背景图像
 *  background-blend-mode  
    
 *  background-position-x、background-position-y

如果不设置其中的某个值，也不会出问题，顺序也无所谓先后。通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。（IE8 以及更早的浏览器不支持一个元素多个背景图像。IE7 以及更早的浏览器不支持 "inherit"。IE8 需要 !DOCTYPE。IE9 支持 "inherit"。），看个在线的例子：[试一试][Link 1]

background-color和background-image，就不在这里详细的说了，毕竟经常用，都知道吧（注意:background-color没有inherit值）

可以设置多张图片作为背景（IE8 以及更早的浏览器不支持一个元素多个背景图像。）

body
    { 
    background-image:url(bg_flower.gif),url(bg_flower_2.gif);
    }

background-repeat：repeat（默认值）|repeat-y|repeat-x|no-repeat|inherit（IE不支持该值）（所有浏览器都支持该属性）

background-attachment：scroll（默认值）|fixed|inherit（IE不支持该值）（所有浏览器都支持该属性）

background-position:0% 0%（默认值）【两个值，可以是方向（left、top、bottom、center、right）的设置，也可以是百分比的形式，还可以是像素大小的设置，如果只设置一个值，那么第二个默认为center（50%）】，例：left top|top（类似于top center）|20% 20%|40px 40px|40px（类似于40px  50%）。也可以是inherit（但IE不支持该值）

嗯、主要讲讲下面的

## background-size ##

background-size:length|percentage|cover|contain;

*  length：设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
 *  percentage：以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
 *  cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
 *  contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

background-size:80px 60px;
    background-size:80% 60%;
    background-size:cover;
    background-size:contain;

div
    {
    background:url(bg_flower.gif);
    -moz-background-size:63px 100px; /* 老版本的 Firefox */
    background-size:63px 100px;
    background-repeat:no-repeat;
    }

兼容性：IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-size 属性。

## background-origin: ##

规定 background-position 属性相对于什么位置来定位。注意：如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。

background-origin: padding-box|border-box|content-box;

1.  padding-box:背景图像相对于内边距框来定位
2.  border-box：背景图像相对于边框盒来定位
3.  content-box：背景图像相对于内容框来定位

兼容性：IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-origin 属性。

background-clip:padding-box|border-box|content-box;  
兼容性：IE9+、Firefox、Opera、Chrome 以及 Safari 支持 background-clip 属性。  
下面的不常用，但还是蛮有意思的

## background-blend-mode : ##

background-blend-mode :blend，混合的意思喽，我的理解就是把两种（及以上）的背景进行混合

可以是两个图像背景，也可以是一个颜色和一个图像的背景（但我们知道颜色最多只能有一个了），看下面的写法

background:url("../img/img2.jpg"),url("../img/img.jpg") ; background-blend-mode: exclusion  ; }

background:url("../img/img2.jpg"),#ef3239 ; background-blend-mode: exclusion  ; }

混合模式应该按background-image CSS属性同样的顺序定义。如果混合模式数量与背景图像的数量不相等，它会被截取至相等的数量。

一个<blend-mode>定义混合的模式，可以有多个值，用逗号间隔。下面是它可取的值

background-blend-mode:normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light 
    | soft-light | difference | exclusion | hue | saturation | color | luminosity
    
    /* 单值 */
    background-blend-mode: normal;
    
    /* 双值，每个背景一个值 */
    background-blend-mode: darken, luminosity;
    
    background-blend-mode: initial;
    background-blend-mode: inherit;
    background-blend-mode: unset;

兼容性：这个兼容性不太好，IE下不支持。其他浏览器也要高版本的才支持

<table style="border:0px;margin:0px;padding:0px;width:729.333px;color:rgb(51,51,51);font-family:'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', Arial, sans-serif;font-size:12px;background-color:rgb(255,255,255);"> 
 <tbody style="margin:0px;padding:0px;"> 
  <tr style="border-top:0px;margin:0px;padding:0px;"> 
   <th style="border-color:rgb(212,212,212);margin:0px;padding:5px;font-size:16px;height:32px;background-repeat:no-repeat;background-position:center;background-color:rgb(255,255,255);font-weight:normal;color:rgb(85,85,85);vertical-align:middle;width:172px;">属性</th> 
   <th title="Chrome" style="border-color:rgb(212,212,212);margin:0px;padding:5px;font-size:13px;height:32px;background-repeat:no-repeat;background-position:center;background-color:rgb(255,255,255);font-weight:normal;color:rgb(85,85,85);vertical-align:middle;background-image:url(&quot;/images/compatible_chrome.gif&quot;);width:98.6667px;">&nbsp; &nbsp; Chrome</th> 
   <th title="Internet Explorer / Edge" style="border-color:rgb(212,212,212);margin:0px;padding:5px;font-size:13px;height:32px;background-repeat:no-repeat;background-position:center;background-color:rgb(255,255,255);font-weight:normal;color:rgb(85,85,85);vertical-align:middle;background-image:url(&quot;/images/compatible_edge.gif&quot;);width:98.6667px;">&nbsp; &nbsp; &nbsp; IE</th> 
   <th title="Firefox" style="border-color:rgb(212,212,212);margin:0px;padding:5px;font-size:13px;height:32px;background-repeat:no-repeat;background-position:center;background-color:rgb(255,255,255);font-weight:normal;color:rgb(85,85,85);vertical-align:middle;background-image:url(&quot;/images/compatible_firefox.gif&quot;);width:98.6667px;">&nbsp; &nbsp; Firefox</th> 
   <th title="Safari" style="border-color:rgb(212,212,212);margin:0px;padding:5px;font-size:13px;height:32px;background-repeat:no-repeat;background-position:center;background-color:rgb(255,255,255);font-weight:normal;color:rgb(85,85,85);vertical-align:middle;background-image:url(&quot;/images/compatible_safari.gif&quot;);width:98.6667px;">&nbsp; &nbsp; &nbsp; Safire</th> 
   <th title="Opera" style="border-color:rgb(212,212,212);margin:0px;padding:5px;font-size:13px;height:32px;background-repeat:no-repeat;background-position:center;background-color:rgb(255,255,255);font-weight:normal;color:rgb(85,85,85);vertical-align:middle;background-image:url(&quot;/images/compatible_opera.gif&quot;);width:98.6667px;">&nbsp; &nbsp;Opera</th> 
  </tr> 
  <tr style="border-top:0px;margin:0px;padding:0px;background-color:rgb(246,244,240);"> 
   <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;vertical-align:top;min-width:25px;">background-blend-mode</td> 
   <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;text-align:center;vertical-align:top;">35.0</td> 
   <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;text-align:center;vertical-align:top;"><span style="border:0px;margin:0px;padding:0px;color:rgb(232,0,0);background-color:transparent;">不支持</span></td> 
   <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;text-align:center;vertical-align:top;">30.0</td> 
   <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;text-align:center;vertical-align:top;">7.1</td> 
   <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;text-align:center;vertical-align:top;">22.0</td> 
  </tr> 
 </tbody> 
</table>

## background-position-x和background-position-y ##

background-position-x : length | left | center | right  
     background-position-y : length | left | center | right  
取值：    
     length ：百分数 | 由浮点数字和单位标识符组成的长度值  
     left ：居左  
     center：居中  
     right ：居右  
兼容性：  
     chrome和IE支持，写法：  
           background-position-x:30px;-ms-background-position-x:30px;    
           background-position-y:30px;-ms-background-position-y:30px;   
    firefox不支持这两个属性，如果要兼容，需要写成：

background-position:30px 30px;

参考：[http://www.w3school.com.cn/cssref/pr\_background.asp][http_www.w3school.com.cn_cssref_pr_background.asp]

ok,完毕

[Link 1]: http://www.w3school.com.cn/tiy/t.asp?f=csse_background
[http_www.w3school.com.cn_cssref_pr_background.asp]: http://www.w3school.com.cn/cssref/pr_background.asp