关于css 的 background 属性
background属性可以用来一次性设置以下属性:
- background-clip: 设置该元素背景的边缘范围(border-box , padding-box, content-box , etc)
- background-color: 背景颜色
- background-image: 背景图片
- background-origin: 背景相对位置的起始点(border-box, padding-box, content-box, etc)
- background-position: 背景的相对位置(相对于起始点)
- background-repeat: 背景图片的重复方式
- background-size: 背景图片的尺寸
- background-attachment: 调整背景图片可滚动/固定
background相关的属性一般使用起来比较简单,不会做过多的组合;可以通过MDN上的实时示例了解具体效果
Example
HTML
<p class="topbanner">
Starry sky<br/>
Twinkle twinkle<br/>
Starry sky
</p>
<p class="warning">Here is a paragraph<p>
CSS
.warning {
background: pink;
}
.topbanner {
background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed;
}
Result