CSS设置图片的位置

最新推荐文章于 2024-08-24 13:47:49 发布

量变决定质变

最新推荐文章于 2024-08-24 13:47:49 发布

阅读量3.2w

点赞数 9

分类专栏： ————CSS

本文链接：https://blog.csdn.net/nangeali/article/details/52156470

版权

————CSS 专栏收录该内容

39 篇文章 2 订阅

订阅专栏

CSS设置图片的位置

CSS通过background-position属性来调整背景图片的位置。

比如，当希望背景图片显示在页面的右下角时，可以设置属性值为bottomright即可。

<span style="font-size:24px;"><html>
	<head>
		<title>
			背景的位置
		</title>
		<style>
			<!--
			body{
			padding:0px;
			margin:0px;
			background-image:url(
http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg);
			background-repeat:no-repeat;
			background-position:bottom right;
			background-color:#eeeee8;
		}		
			span{
			font-size:70px;
			float:left;
			font-family:黑体;
			font-weight:bold;
		}
			p{
			margin:0px;
			font-size:14px;
			padding-top:10px;
			padding-left:6px;
			padding-right:8px;
		}
			-->
		</style>
	</head>
	
	<body>
		<p><span>雪</span>是大气固态降雨中的一种最广泛、最普遍、最主要的形式。大气固态降水是多种多样的，除了美丽的雪花以外，还包括能造成很大危害的冰雹，还有我们不经常见到的雪雾和冰粒。</p>
		<p>
			立冬 太阳位于黄径，11月7~8日<br>
			小雪 太阳位于黄径，11月22~23日<br>
			大雪 太阳位于黄径，12月6~8日<br>
			冬至 太阳位于黄径，12月21~23日<br>
			小寒 太阳位于黄径，1月5~7日<br>
			大寒 太阳位于黄径，1月20~21日
		</p>
	</body>
</html></span>

可以看到背景图片位于页面的右下方。

此外，background-position的属性值还可以设置为topleft、topcenter、topright、centerleft、centercenter、centerright、bottomleft和bottomcenter等等。

CSS不仅可以设置为上中下、左中右的模式，而且，还可以给背景图片的位置定义具体的百分比，实现精确定位。

<span style="font-size:24px;"><html>
	<head>
		<title>
			背景的位置
		</title>
		<style>
			<!--
			body{
			padding:0px;
			margin:0px;
			background-image:url(
http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg);
			background-repeat:no-repeat;
			background-position:30% 70%;
		}		
			p{
			padding:10px;
			margin:5px;
			line-right:1.5em;
		}
			-->
		</style>
	</head>
	
	<body>
		<p>CSS（Cascading Style Sheet），中文译为层叠样式表，用于控制页面样式，并允许将样式信息与网友内容分离的一种标记性语言……</p>
	</body>
</html></span>

显示的效果，background-position：30%70%；的设置，使得背景图片的中心点在水平方向上处于30%的位置，在竖直方向上则位于70%的位置。

此时，如果改变了浏览器窗口的大小，背景图片也会进行相应的调整，但是，始终位于水平方向上30%和竖直方向上70%的位置。

除了上述的百分比，还可以设置具体的数值，分别定义水平位置和竖直方向的位置。

background-position:300px 25px;

显示效果，背景图片的左上角，距离页面左侧300像素，距离页面上端25像素的位置。

这个绝对位置不会随着浏览器大小的改变而发生变化，如果，当浏览器的宽度本身小于300像素时，背景图片就会显示不全。

此外，还可以将具体位置设置为负数，这种方法在具体使用中也经常用来调整模块背景的位置。