图片全屏效果的2种方法

最新推荐文章于 2021-05-31 12:01:45 发布

欣琪

最新推荐文章于 2021-05-31 12:01:45 发布

阅读量1.7k

点赞数

分类专栏： css 文章标签： css html

本文链接：https://blog.csdn.net/qq_41038929/article/details/106070652

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

第一种：通过CSS是div实现全屏效果

直接上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		html,body{
			height: 100%;
		}
		#container,.sections,.section{
			height: 100%;
		}
		.section{
			background-image: url(../../static/img/indexBg.png);
			color: #fff;
			text-align: center;
			background-size: cover;
			background-position: 50% 50%;
		}
	</style>
	<body>
		<div id="container">
			<div class="sections">
				<div class="section">
					猫咪，你好啊。。。。
				</div>
			</div>
		</div>
	</body>
</html>

全屏要素：
1.全屏的元素及其父元素都要设置height:100%。
2，将html，body标签设置height:100%。
注:height:100%是跟随其父元素高度变化而变化的。

直接上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		#container{
				background: url(../../static/img/indexBg.png) no-repeat top center;
				background-size: cover;
				background-attachment: fixed;
				width: 100%;
				height: 100%;
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
			}
	</style>
	<body>
		<div id="container">
			<div class="sections">
				<div class="section" id="section0">
					猫咪，你好啊。。。。
				</div>
			</div>
		</div>
	</body>
</html>