设置banner图片居中且有背景

最新推荐文章于 2022-11-27 22:22:02 发布

原创最新推荐文章于 2022-11-27 22:22:02 发布 · 2.3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#CSS样式布局

CSS 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用CSS实现图片居中的布局技巧，该方法可以让图片无论页面如何缩放始终处于居中位置，并保持良好的视觉效果。代码示例中详细展示了如何通过设置绝对定位和自定义偏移量来实现这一目的。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

分享一个设置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>

秦卿著