您的位置：首页 > Web前端 > CSS

设置banner图片居中且有背景

2016-10-19 15:10 309 查看

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

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>居中布局</title>

<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>
<div id="box">
<img src="img/bg.jpg" alt="加载中.." />
</div>
</body>
</html>

秦卿著

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： CSS样式布局

相关文章推荐

新的分享

章节导航