background属性 css

 

CSS实现背景图片右侧定位的5种小技巧

background-position: calc(100% - 10px) 50%;

background-position: right 10px top 50%;

 

background-attachment

background-size cover和contain的区别

CSS 背景属性background简写攻略

https://www.w3school.com.cn/cssref/pr_background.asp

https://www.w3school.com.cn/css3/css3_background.asp

 

常用的6个属性：

background-color 属性设置元素的背景颜色。
默认值：   transparent

background-image 属性为元素设置背景图像。
默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。
提示：请设置一种可用的背景颜色，这样的话，假如背景图像不可用，页面也可获得良好的视觉效果。

background-repeat 属性设置是否及如何重复背景图像。
默认值：    repeat  （ no-repeat，repeat，repeat-x，repeat-y）

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
默认值：    scroll （fixed，scroll）

background-position 属性设置背景图像的起始位置。
默认值：    0% 0%。 （left center right) (top center bottom)，x% y%， xpx ypx

background-size 属性规定背景图像的尺寸。 【CSS3】
默认值：    auto。 (背景图像的原始尺寸)
cover(图片依靠长边缩放)，contain（图像依靠短边缩放），x% y% ，xpx ypx

 

background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];
 

注意：如果简写形式中含有background-size属性，那么必须同时写上background-position属性，如果省略了就会导致样式失效；
都写的时候background-size属性前面需要加/

background: url(../../img/common/date.png) no-repeat 0 0;   正确
background: url(../../img/common/date.png) no-repeat cover; 错误
background: url(../../img/common/date.png) no-repeat 0 0 / cover; 正确

 

不常用的2个属性：

background-origin 属性规定 background-position 属性相对于什么位置来定位。【CSS3】 todo
默认值：    padding-box  (padding-box|border-box|content-box)

background-clip 属性规定背景的绘制区域。【CSS3】
默认值：    border-box  (border-box|padding-box|content-box)