（CSS入门）CSS 背景附着

CSS 背景附着

CSS background-attachment
属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）：

指定应该固定背景图像：

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

指定背景图像应随页面的其余部分一起滚动：

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: scroll;
}

CSS 背景简写

CSS background - 简写属性
如需缩短代码，也可以在一个属性中指定所有背景属性。它被称为简写属性。

而不是这样写：

body {
  background-color: #ffffff;
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

使用简写属性在一条声明中设置背景属性：

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

在这里插入图片描述

posted @ 2021-08-05 11:07  mcl19909949541  阅读(62)  评论(0)    收藏  举报