设置banner图片居中且有背景

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qinqingz/article/details/52859620

分享一个设置banner图片居中布局的css小技巧.  放大缩小页面皆可居中页面对齐. 且可设置banner背景

代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>居中布局</title>
		<!--css样式-->
		<style type="text/css">
			*{  /*先清除样式*/
				margin: 0;
				padding: 0;
			}
			#box{ /*设置包着图片的盒子是宽100% 高是图片的高度  相对定位*/
				width: 100%; 
				height: 650px; 
				position: relative;
			}
			#box img{
				width: 1920px;  /*设置宽高是图片的 宽高*/
				height: 650px; 
				position: absolute; 	/*绝对定位*/
				left: 50%;          	/*距离左边50% */
				margin-left: -960px;	/*让图片向左扯回 图片总宽的一半的距离*/
			}
		</style>
	</head>
	<!--body部分-->
	<body>
		<div id="box">
			<img src="img/bg.jpg" alt="加载中.." />
		</div>
	</body>
</html>

秦卿著

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页