`
yxc_gdut
  • 浏览: 97290 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

css background-position 图片位置

    博客分类:
  • css
阅读更多

 

css 属性:

background-position: x y;

x、y值可以是left right top bottom center,可以是相对值%,可以是数字。

 

下面测试代码

 

 

<!DOCTYPE HTML>
<html>
  <head>
    <title>bg_image.html</title>
    <meta http-equiv="content-type" content="text/html; charset=gb2312">
	<style type="text/css">
		ul{list-style:none;margin:0px;padding:0px;}
		li{float:left;}
		.clear{clear:both;}
		.small_image{
			border:1px solid #000;
			margin:20px;
			width:200px;
			height:200px;
			background-image:url(../images/tiancai.jpg);
			background-repeat:no-repeat;
		}
		.large_image{
			border:1px solid #000;
			margin:20px;
			width:200px;
			height:200px;
			background-image:url(../images/text_400px.gif);
			background-repeat:no-repeat;
		}
		.bg_position_left_center{
			background-position:left center;
		}
		.bg_position_50_50{
			background-position:50% 50%;
		}
		.bg_position_-50_-50{
			background-position:-50% -50%;
		}
		.bg_position_20px_20px{
			background-position:20px 20px;
		}
		.bg_position_-20px_-20px{
			background-position:-20px -20px;
		}
		.bg_position_50_20px{
			background-position:50% 20px;
		}
	</style>
  </head>
  
  <body>
    <ul>
    	<li>
		    <p>小图像 left center</p>
		    <div class="small_image bg_position_left_center"></div>
	    </li>
	    <li>
		    <p>小图像 50% 50%</p>
		    <div class="small_image bg_position_50_50"></div>
	    </li>
	    <li>
		    <p>小图像 -50% -50%</p>
		    <div class="small_image bg_position_-50_-50"></div>
	    </li>
	    <li class="clear">
		    <p>小图像 20px 20px</p>
		    <div class="small_image bg_position_20px_20px"></div>
	    </li>
	    <li>
		    <p>小图像 -20px -20px</p>
		    <div class="small_image bg_position_-20px_-20px"></div>
	    </li>
	    <li>
		    <p>小图像 50% 20px</p>
		    <div class="small_image bg_position_50_20px"></div>
	    </li>
	    <li class="clear">
		    <p>大图像 left center</p>
		    <div class="large_image bg_position_left_center"></div>
	    </li>
	    <li>
		    <p>大图像 50% 50%</p>
		    <div class="large_image bg_position_50_50"></div>
	    </li>
	    <li>
		    <p>大图像 20px 20px</p>
		    <div class="large_image bg_position_20px_20px"></div>
	    </li>
	  </ul>
  </body>
</html>

 

 

浏览器呈现:


 原图在附件中

 

总结:

 

        1、x作用于横轴,y是竖轴

        2、当取英文关键字时,left 相当于 x:0%,center为50%具体看它放在x还是y处。

注:无论left在x或者y的位置,它都会将x变成0%;

        3、xy取数字,就是图片左上角与元素的左上角的位置偏移。取负数,则向上向左偏移。

        4、xy取%,如10% 20%,图片的(10%*宽,20%*高)坐标对应元素的(10%*宽,20%*高)坐标,两个坐标重合就是图片的位置。如果取负数则是元素的左上角与图片(10%*宽,20%*高)坐标重合。

 

 

  • 大小: 89.2 KB
  • 大小: 12.5 KB
  • 大小: 4.7 KB
0
1
分享到:
评论

相关推荐

    CSS中背景图片定位方法:background-position的用法

    总之,`background-position`是CSS中用于控制背景图片位置的强大工具,结合不同的值类型和组合,开发者可以创造出丰富的视觉效果。熟练掌握其用法和算法,能有效提升网页设计的灵活性和精细度。

    前端开源库-css-background-video

    其中,`background-size`用于控制视频的大小,`background-position`可调整视频在背景中的位置,而`background-repeat`则决定视频是否重复播放。 4. **前端开源库的优势** 使用开源库如"css-background-video"的...

    CSS background-position的使用说明详解

    CSS的background-position属性是网页设计中非常重要的一个工具,它允许设计师在不影响元素内边距的情况下调整背景图片的位置,这对于创建视觉效果丰富的网页布局至关重要。使用正确的值能够确保背景图片以预期的方式...

    关于背景图片的定位(background-position)

    `background-position`属性是CSS(层叠样式表)中的一个核心特性,用于控制背景图像在元素内的位置。这篇博客文章通过实例深入探讨了这一属性的使用方法和技巧。 首先,`background-position`属性允许我们将背景...

    css 之 background-position-x

    css 之 background-position-x 是 CSS 中的一个属性,用于设置背景图片的水平位置。这个属性是 background-position 属性的简写形式,专门用于设置背景图片的水平位置。 背景图片的水平位置是指背景图片左上角相...

    CSS background-position 属性 定位图片

    CSS background-position 属性定位图片 在 CSS 中,background-position 属性是设置背景图像的起始位置的属性。今天,我们来讨论这个属性的定义、用法和效果。 定义 background-position 属性设置背景图像的起始...

    css3实现一个div设置多张背景图片及background-image属性实例演示

    这里,`background-repeat` 和 `background-position` 属性分别定义每张图片的重复方式和位置。每张图片的属性值都应与 `background-image` 中对应的图片一一对应。 除了静态图片,CSS3还引入了背景渐变的概念。...

    css3背景图片指定显示位置

    综上所述,CSS3的`background-position`属性及其相关属性提供了强大的背景图片定位功能,让开发者能够创造出富有创意和个性化的网页设计。在实际工作中,熟练掌握这些知识点将极大地提高网页设计和开发的效率和质量...

    css取背景位css取背景位css取背景位

    在CSS(层叠样式表)中,背景位(background-position)是一个非常重要的属性,用于设置元素背景图像的位置。它允许开发者精确控制背景图片在元素内的显示位置,从而实现各种设计效果,比如背景图像的平铺、居中、...

    background-position鱼游动特效.zip

    在这个"背景位置-鱼游动特效"中,开发者巧妙地利用了这两个属性来创建出逼真的鱼类游动动画。 一、CSS3 Animation CSS3的`animation`属性允许我们定义一个动画序列,包括动画的持续时间、延迟、次数、方向、填充...

    利用CSS定位背景图片 background-position

    以下内容将详细阐述如何使用CSS中的background-position属性来精确控制背景图片的显示位置,以及相关的知识点。 首先,需要理解背景图片定位的基本概念。在一个网页元素上设置背景图片时,如果图片的尺寸小于元素的...

    背景图片定位

    在CSS中,`background-position`属性是控制背景图像位置的核心。通过这个属性,我们可以精确地设置背景图像相对于其包含元素的位置。语法如下: ```css background-position: x-position y-position; ``` 这里的`x...

    CSS背景background、background-position使用详解

    `background-position`属性非常关键,它决定了背景图片在元素内的起始位置。可以使用像素、百分比或其他长度单位来设定。例如,`background-position: 10px 20px;`表示图片的左上角距离元素左上角10像素水平偏移,...

    CSS-背景图定位

    `background-image`用于设置元素的背景图像,可以是一个URL指向的图片或使用CSS渐变。例如: ```css div { background-image: url('image.png'); } ``` `background-repeat`决定图像是否以及如何重复。它可以是`...

    CSS中背景background-position负值定位深入理解[图文]

    在CSS中,背景图片的位置可以通过`background-position`属性来调整,这个属性允许我们将背景图片放置在元素内的任意位置。在给定的例子中,我们深入探讨了如何使用负值来实现更精细的定位。 首先,我们要了解`...

    css background之设置图片为背景技巧.docx

    CSS中的`background`属性是一个非常重要的样式规则,用于设置元素的背景效果,包括背景颜色、背景图像、背景重复方式、背景是否固定以及背景位置等。这个属性允许开发者在一个声明中控制多个背景属性,大大简化了CSS...

Global site tag (gtag.js) - Google Analytics