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 - 简写属性 (添加了右外边距,以使文本不会覆盖背景图片)

图片.png


<!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>

图片.png


1、本站资源长期持续更新。
2、本资源基本为原创,部分来源其他付费资源平台或互联网收集,如有侵权请联系及时处理。
3、本站大部分文章的截图来源实验测试环境,请不要在生产环境中随意模仿,以免带来灾难性后果。

转载请保留出处:  www.zh-cjh.com珠海陈坚浩博客 » CSS background - 简写属性 (添加了右外边距,以使文本不会覆盖背景图片)

作者: cjh


手机扫一扫,手机上查看此文章:

一切源于价值!

其他 模板文件不存在: ./template/plugins/comment/pc/index.htm

未雨绸缪、居安思危!

数据安全、有备无患!

注意操作、数据无价!

一切源于价值!