CSS background - 简写属性 (添加了右外边距,以使文本不会覆盖背景图片)
CSS background - 简写属性
如需缩短代码,也可以在一个属性中指定所有背景属性。它被称为简写属性。
而不是这样写:
body {
background-color: #ffffff;
background-image: url("tree.png");
background-repeat: no-repeat;
background-position: right top;
}
您能够使用简写属性 background:
实例
使用简写属性在一条声明中设置背景属性:
body {
background: #ffffff url("tree.png") no-repeat right top;
}
在使用简写属性时,属性值的顺序为:
background-color
background-image
background-repeat
background-attachment
background-position
属性值之一缺失并不要紧,只要按照此顺序设置其他值即可。请注意,在上面的例子中,我们没有使用 background-attachment 属性,因为它没有值。
所有CSS 背景属性
background 在一条声明中设置所有背景属性的简写属性。
background-attachment 设置背景图像是固定的还是与页面的其余部分一起滚动。
background-clip 规定背景的绘制区域。
background-color 设置元素的背景色。
background-image 设置元素的背景图像。
background-origin 规定在何处放置背景图像。
background-position 设置背景图像的开始位置。
background-repeat 设置背景图像是否及如何重复。
background-size 规定背景图像的尺寸。
CSS background - 简写属性 (添加了右外边距,以使文本不会覆盖背景图片)
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #ffffff url("/i/photo/tree.png") no-repeat right top;
margin-right: 200px;
}
</style>
</head>
<body>
<h1>background 属性</h1>
<p>background 属性是在一条声明中指定所有背景属性的简写属性。</p>
<p>在这里,背景图像只显示一次,并位于右上角。</p>
<p>我们还添加了右外边距,以使文本不会覆盖背景图片。</p>
</body>
</html>
2、本资源基本为原创,部分来源其他付费资源平台或互联网收集,如有侵权请联系及时处理。
3、本站大部分文章的截图来源实验测试环境,请不要在生产环境中随意模仿,以免带来灾难性后果。
转载请保留出处: www.zh-cjh.com珠海陈坚浩博客 » CSS background - 简写属性 (添加了右外边距,以使文本不会覆盖背景图片)
作者: cjh
手机扫一扫,手机上查看此文章: |
一切源于价值!
其他 模板文件不存在: ./template/plugins/comment/pc/index.htm