CSS background-attachment 背景图片固定效果
CSS background-attachment 背景图片固定效果
Devops海洋的渔夫
发布于 2019-06-02 13:39:00
发布于 2019-06-02 13:39:00
background-attachment 设置背景图片是固定还是随着页面滚动条滚动
当给页面body设置背景图片，背景图片默认是随着滚动条下拉而滚动的。下面写一个示例看看，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background-image: url(meinv.jpg);
}
p{
width: 100px;
height: 1000px;
margin: 50px auto;
font-size: 18px;
color: red;
}
</style>
</head>
<body>
<!-- (p{段落内容$})*7 -->
<p>段落内容1</p>
<p>段落内容2</p>
<p>段落内容3</p>
<p>段落内容4</p>
<p>段落内容5</p>
<p>段落内容6</p>
<p>段落内容7</p>
</body>
</html>
从上面的效果来看，如果下拉浏览器滚动条，段落的文字内容和背景图片都在下拉，那能不能固定背景图片不移动呢？
这里就涉及到了background-attachment:fixed;的属性。
设置背景图片固定
下面再看下拉一下浏览器看看，如下：
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019.02.05 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录