css中如何调整图片位置?

css中如何调整图片位置?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

方法1:使用background-position属性设置背景图像的起始位置

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

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

<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>

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

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

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

<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>

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

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

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

background-position:300px 25px;

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

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

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

方法2:使用position属性配合left、top、right以及bottom属性控制<img>标签引入图片的位置

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>css控制图片位置</title>
</head>
<body>
<div style="width:500px;height:400px;border:1px solid red;position:relative;">
<img src="img/4.jpg" style="width:100px;height:100px;position:absolute;left:200px;top:200px;"/>
</div>
</body>
</html>

效果如下

1.jpg

position 属性规定元素的定位类型。

这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

属性值:

  • absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

  • fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

  • relative 生成相对定位的元素,相对于其正常位置进行定位。因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

  • static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

更多web前端知识,请查阅 HTML中文网 !!

以上就是css中如何调整图片位置?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏