CSS3 background-attachment：属性

最新推荐文章于 2024-04-18 09:34:39 发布

MuGuiLin

最新推荐文章于 2024-04-18 09:34:39 发布

阅读量739

点赞数 2

分类专栏： CSS3 HTML5 文章标签： css3 background-attachmen 定义背景图片随滚动轴的移动方式

本文链接：https://blog.csdn.net/muguli2008/article/details/51944471

版权

HTML5 同时被 2 个专栏收录

16 篇文章 1 订阅

订阅专栏

CSS3

12 篇文章 1 订阅

订阅专栏

background-attachment :定义背景图片随滚动轴的移动方式

取值: scroll | fixed | inherit
scroll: 随着页面的滚动轴背景图片将移动
fixed: 随着页面的滚动轴背景图片不会移动
inherit: 继承初始值: scroll
继承性: 否
适用于: 所有元素

HTML代码：

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>CSS3 background-attachment 属性</title>
</head>

<body>

	<article>

		<div><img src="http://img.daimg.com/uploads/allimg/120224/3-120224210UR44.jpg" /></div>
		<div class="bg_img1"></div>

		<div><img src="http://img.daimg.com/uploads/allimg/140905/3-140Z51GT7.jpg" /></div>
		<div class="bg_img2"></div>

		<div><img src="http://www.daimg.com/uploads/allimg/120224/3-120224124141C4.jpg" /></div>
		<div class="bg_img3"></div>

		<div><img src="http://img.daimg.com/uploads/allimg/120224/3-120224144215557.jpg" /></div>
		<div class="bg_img4"></div>

	</article>
</body>

</html>

CSS代码：

	* {
			margin: 0px;
			padding: 0px;
			box-sizing: border-box;
		}
		pre {
			padding: 10px;
			font-size: 18px;
			position: fixed;
		}
		article {
			width: 1000px;
			margin: auto;
		}
		article div {
			width: 100%;
			height: 600px;
			box-shadow: 0px 0px 8px 2px gray;
		}
		article div img {
			width: 100%;
		}
		.bg_img1 {
			background: url(http://img.daimg.com/uploads/allimg/120225/3-120225130605612.jpg) no-repeat;
			background-size: cover;
			background-attachment: fixed;
		}
		.bg_img2 {
			background: url(http://img.daimg.com/uploads/allimg/140718/3-140GR33143.jpg) no-repeat;
			background-size: cover;
			background-attachment: fixed;
		}
		.bg_img3 {
			background: url(http://img.daimg.com/uploads/allimg/120405/3-120405120PL31.jpg) no-repeat;
			background-size: cover;
			background-attachment: fixed;
		}
		.bg_img4 {
			background: url(http://img.daimg.com/uploads/allimg/120224/3-12022421310L04.jpg) no-repeat;
			background-size: cover;
			background-attachment: fixed;
		}

MuGuiLin

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 background-attachment：属性

background-attachment :定义背景图片随滚动轴的移动方式取值: scroll | fixed | inheritscroll: 随着页面的滚动轴背景图片将移动fixed: 随着页面的滚动轴背景图片不会移动inherit: 继承初始值: scroll继承性: 否适用于: 所有元素HTML代码：<!DOCTYPE html><h...
复制链接

扫一扫

专栏目录