CSS3 Background

雾里看花叹朦胧

于 2020-12-02 21:46:15 发布

阅读量151

点赞数

分类专栏： css3 文章标签： css3 background attachment fixed cover

本文链接：https://blog.youkuaiyun.com/hsl0530hsl/article/details/110500297

版权

css3 专栏收录该内容

8 篇文章

订阅专栏

/*实现背景图片不滚动*/
html {
	height: 100%;
	background-color: green;
	background-image: url(./img/bg.png);
	background-size: 100% 100%; //不缩放
	background-attachment: ficed; //固定背景不滚动
							//scroll: 滚动
}c
/*背景图片占满区域*/
.header {
	display: block;
	width: 100%;
	height: 400px;
	background-color: gray;
	background-image: url(./img/header.png);
	background-size: cover;//cover:等比缩放，占满整个header区域，多余的截掉
							//contain:等比缩放，图片要完全显示，可以不占满整个header区域
	background-position: center center;//上下左右居中显示
}