背景重复颜色固定


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>背景属性</title>
<style>
.box{
/* width:300px; */
height:500px;
border:5px solid red;
background-color:yellow;
background-image: url('./cls.jpg');
background-repeat: no-repeat;
background-position:400px 200px;
background-attachment:fixed;

background: url('./cls.jpg') black  400px 200px   no-repeat;
}

.phone{
width:30px;
height:32px;
background-color:pink;
background-image:url('res.jpg');
background-position:0 -30px;
}

</style>
</head>
<body>
<!--
背景
background-color:  背景颜色
-image:  背景图片
-repeat: 背景重复    no-repeat  / repeat
-position: 右 下   背景定位
-attachment:  背景固定

简写:
background:[ color | image | repeat | position | attachment]
-->
<div class='box'>

</div>
<br />
<br />
<br />
<div class='phone'></div>
<p>苍老师好厉害</p>
<p>苍老师好厉害</p>
<p>苍老师好厉害</p>
<p>苍老师好厉害</p>
<p>苍老师好厉害</p>
<p>苍老师好厉害</p>
<p>苍老师好厉害</p>
<p>苍老师好厉害</p>
<p>苍老师好厉害</p>
<p>苍老师好厉害</p>
<p>苍老师好厉害</p>
<p>苍老师好厉害</p>
<p>苍老师好厉害</p>
<p>苍老师好厉害</p>
<p>苍老师好厉害</p>
<p>苍老师好厉害</p>
<p>苍老师好厉害</p>
<p>苍老师好厉害</p>
<p>苍老师好厉害</p>
<p>苍老师好厉害</p>
<p>苍老师好厉害</p>
<p>苍老师好厉害</p>
<p>苍老师好厉害</p>
<p>苍老师好厉害</p>
<p>苍老师好厉害</p>
<p>苍老师好厉害</p>
<p>苍老师好厉害</p>
<p>苍老师好厉害</p>
<p>苍老师好厉害</p>
<p>苍老师好厉害</p>
<p>苍老师好厉害</p>
<p>苍老师好厉害</p>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容