CSS3实现背景图片视觉差效果

最新推荐文章于 2024-05-07 19:57:33 发布

剑锋之行

最新推荐文章于 2024-05-07 19:57:33 发布

阅读量3.5k

点赞数 2

分类专栏： html5 文章标签：背景视觉差效果

本文链接：https://blog.csdn.net/lijianfengxiaoli/article/details/81938080

版权

html5 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			section {
				height: 100vh;
			}
			
			.g-img1 {
				background-image: url(../static/images/a1.jpg);
				background-attachment: fixed;
				background-size: cover;
				background-position: center center;
			}
			.g-img2 {
				background-image: url(../static/images/a2.jpg);
				background-attachment: fixed;
				background-size: cover;
				background-position: center center;
			}
			.g-img3 {
				background-image: url(../static/images/a3.jpg);
				background-attachment: fixed;
				background-size: cover;
				background-position: center center;
			}
		</style>
	</head>

	<body>
		<section class="g-word">Header</section>
		<section class="g-img1">IMG1</section>
		<section class="g-word">Content1</section>
		<section class="g-img2">IMG2</section>
		<section class="g-word">Content2</section>
		<section class="g-img3">IMG3</section>
		<section class="g-word">Footer</section>
	</body>

</html>

剑锋之行

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
CSS3实现背景图片视觉差效果

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; section { height: 100vh; }
复制链接

扫一扫