（CSS入门）CSS 背景附着

最新推荐文章于 2023-07-31 14:10:36 发布

mcl19909949541

最新推荐文章于 2023-07-31 14:10:36 发布

阅读量318

点赞数

分类专栏： HTML+CSS 文章标签： css css3

本文链接：https://blog.csdn.net/qq_52290436/article/details/119412140

版权

HTML+CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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>

在这里插入图片描述

mcl19909949541

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
2
评论
（CSS入门）CSS 背景附着

CSS 背景附着CSS background-attachment属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）：指定应该固定背景图像：body { background-image: url("tree.png"); background-repeat: no-repeat; background-position: right top; background-attachment: fixed;}指定背景图像应随页面的其余部分一起滚动：body {
复制链接

扫一扫