css中的background的几个属性(background-attachment/background-origin,background-clip等)

忘是亡心i 2022-09-30 13:46 270阅读 0赞

关于background中的几个属性：

background-orgin

background-clip

background-size

background-position

backround-attachment

三个盒子：border-box|padding-box|content-box

1.background-origin

用来决定背景图片定位在哪个盒子中。(对背景颜色无作用效果)

background-origin:border-box/padding-box/content-box

（默认值为padding-box）

background-origin 属性规定 background-position 属性相对于什么位置来定位。

注释：如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。

2.background-position:

用于定位背景图片的位置。默认值为（0% 0%）.如果只取一个值时，那么第二个值为50%。

默认的情况下，背景图片是在padding-box的左上角安家的。background-position可以改变默认位置。

css2.1中用两个数字来控制。(可以有负值)

eg:background-position:10% 10%；

css3中可以四个值来控制。

eg：background-position:right 20px bottom 30px;

含义是背景图片相对于右侧向左偏移20px 相对于底部向上偏移30px

这个属性设置背景原图像（由 [background-image][] 定义）的位置，背景图像如果要重复，将从这一点开始。

提示：您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。

3.background-clip:border-box/padding-box/content-box

规定背景的绘制区域（对背景颜色和背景图片同时有效）

默认情况下背景颜色的渲染区域是border-box的左上角到右下角。

背景图片的绘制区域是从padding-box的左上角到border-box的右下角。

4.background-attachment:fixed/scroll(默认)/local（新加的）

当取fixed时，背景图片不随元素的移动而移动,相当于窗体进行固定。

scroll随元素的移动而移动。

local:随内容的移动而移动。

5.background-size：length/percentage/cover/contain

用于规定背景图片的尺寸.,可以用px,也可以用百分比。如果只写一个值，px或者百分比，那么第二个值为auto,是按背景图片的原始高宽比来根据第一个值缩放到相应的尺寸。

cover:放大图片使背景图片完全填充元素，图片的一部分可能无法显示在元素中。

contain:当图片比元素大时，缩小图片使图片完全显示在元素中。元素的一部分可能没有背景填充。当图片比元素小时，图片会放大到图片刚好显示在元素中。

在background-size用percentage做参数时，要根据background-origin来确定大小。

默认的background-origin为padding-box,那么百分比的依据就是（padding+width/height）eg:x%\*(padding+width).

如果background-origin为border-box，那么百分比的依据就是（border-width+padding+width/height）.

如果background-origin为content-box,那么background-size为x%\*width/height

当background-attachment为fixed时，background-origin会失效，这是背景图片是相对于窗体固定，background-size如果使用百分比做参数，百分比的依据是窗体的大小。

eg:background-size为100% 50%时，那么背景图片的宽为窗体的宽，高为窗体高的一半。

6.background-repeat:(默认值为repeat)

单值的情况：

no-repeat相当于no-repeat no-repeat

repeat相当于repeat  repeat

repeat-x相当于repeat  no-repeat

repeat-y相当于no-repeat repeat

round相当于round round

space相当于space space

当使用round时，会根据情况调整background-size的大小

eg:

元素的大小为450\*330，背景图片的大小为140\*100

如果background-repeat为round,那么background-size的实际大小就为150\*110，background-size会根据round进行调整。

space不会改变背景图片的大小（background-size）,但是会在图片之间添加间隙，来使两端的图片刚好对其边缘。

具体这些初始值参见下表：

<table style="font-size:12px; color:rgb(51,51,51); font-family:Arial; text-align:justify; background:rgb(167,191,232)"> 
 <tbody> 
  <tr> 
   <td style="border:3px solid rgb(255,255,255); padding:2px 4px; background:rgb(249,249,249)"> background-color</td> 
   <td style="border:3px solid rgb(255,255,255); padding:2px 4px; background:rgb(249,249,249)"> transparent</td> 
  </tr> 
  <tr> 
   <td style="border:3px solid rgb(255,255,255); padding:2px 4px; background:rgb(249,249,249)"> background-image</td> 
   <td style="border:3px solid rgb(255,255,255); padding:2px 4px; background:rgb(249,249,249)"> none</td> 
  </tr> 
  <tr> 
   <td style="border:3px solid rgb(255,255,255); padding:2px 4px; background:rgb(249,249,249)"> background-repeat</td> 
   <td style="border:3px solid rgb(255,255,255); padding:2px 4px; background:rgb(249,249,249)"> repeat</td> 
  </tr> 
  <tr> 
   <td style="border:3px solid rgb(255,255,255); padding:2px 4px; background:rgb(249,249,249)"> background-attachment</td> 
   <td style="border:3px solid rgb(255,255,255); padding:2px 4px; background:rgb(249,249,249)"> scroll</td> 
  </tr> 
  <tr> 
   <td style="border:3px solid rgb(255,255,255); padding:2px 4px; background:rgb(249,249,249)"> background-position</td> 
   <td style="border:3px solid rgb(255,255,255); padding:2px 4px; background:rgb(249,249,249)"> 0% 0%</td> 
  </tr> 
  <tr> 
   <td style="border:3px solid rgb(255,255,255); padding:2px 4px; background:rgb(249,249,249)"> background-origin</td> 
   <td style="border:3px solid rgb(255,255,255); padding:2px 4px; background:rgb(249,249,249)"> padding-box</td> 
  </tr> 
  <tr> 
   <td style="border:3px solid rgb(255,255,255); padding:2px 4px; background:rgb(249,249,249)"> background-clip</td> 
   <td style="border:3px solid rgb(255,255,255); padding:2px 4px; background:rgb(249,249,249)"> border-box</td> 
  </tr> 
  <tr> 
   <td style="border:3px solid rgb(255,255,255); padding:2px 4px; background:rgb(249,249,249)"> background-size</td> 
   <td style="border:3px solid rgb(255,255,255); padding:2px 4px; background:rgb(249,249,249)"> auto</td> 
  </tr> 
 </tbody> 
</table>

[CSS3：background-size背景图片尺寸属性][CSS3_background-size]

# [“蝉原则”与CSS3随机多背景随机圆角等效果][CSS3] #

## [ CSS3 Backgrounds相关介绍][CSS3 Backgrounds]    ##

[background-image]: http://www.w3school.com.cn/cssref/pr_background-image.asp
[CSS3_background-size]: https://my.oschina.net/xuqianwen/blog/516907
[CSS3]: http://www.zhangxinxu.com/wordpress/2017/02/cicada-principle-css3-randomisation-multiple-backgrounds-border-radius/
[CSS3 Backgrounds]: http://www.zhangxinxu.com/wordpress/2011/05/%E7%BF%BB%E8%AF%91-css3-backgrounds%E7%9B%B8%E5%85%B3%E4%BB%8B%E7%BB%8D/