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%*高)坐标重合。
相关推荐
总之,`background-position`是CSS中用于控制背景图片位置的强大工具,结合不同的值类型和组合,开发者可以创造出丰富的视觉效果。熟练掌握其用法和算法,能有效提升网页设计的灵活性和精细度。
其中,`background-size`用于控制视频的大小,`background-position`可调整视频在背景中的位置,而`background-repeat`则决定视频是否重复播放。 4. **前端开源库的优势** 使用开源库如"css-background-video"的...
CSS的background-position属性是网页设计中非常重要的一个工具,它允许设计师在不影响元素内边距的情况下调整背景图片的位置,这对于创建视觉效果丰富的网页布局至关重要。使用正确的值能够确保背景图片以预期的方式...
`background-position`属性是CSS(层叠样式表)中的一个核心特性,用于控制背景图像在元素内的位置。这篇博客文章通过实例深入探讨了这一属性的使用方法和技巧。 首先,`background-position`属性允许我们将背景...
css 之 background-position-x 是 CSS 中的一个属性,用于设置背景图片的水平位置。这个属性是 background-position 属性的简写形式,专门用于设置背景图片的水平位置。 背景图片的水平位置是指背景图片左上角相...
CSS background-position 属性定位图片 在 CSS 中,background-position 属性是设置背景图像的起始位置的属性。今天,我们来讨论这个属性的定义、用法和效果。 定义 background-position 属性设置背景图像的起始...
这里,`background-repeat` 和 `background-position` 属性分别定义每张图片的重复方式和位置。每张图片的属性值都应与 `background-image` 中对应的图片一一对应。 除了静态图片,CSS3还引入了背景渐变的概念。...
综上所述,CSS3的`background-position`属性及其相关属性提供了强大的背景图片定位功能,让开发者能够创造出富有创意和个性化的网页设计。在实际工作中,熟练掌握这些知识点将极大地提高网页设计和开发的效率和质量...
在CSS(层叠样式表)中,背景位(background-position)是一个非常重要的属性,用于设置元素背景图像的位置。它允许开发者精确控制背景图片在元素内的显示位置,从而实现各种设计效果,比如背景图像的平铺、居中、...
在这个"背景位置-鱼游动特效"中,开发者巧妙地利用了这两个属性来创建出逼真的鱼类游动动画。 一、CSS3 Animation CSS3的`animation`属性允许我们定义一个动画序列,包括动画的持续时间、延迟、次数、方向、填充...
以下内容将详细阐述如何使用CSS中的background-position属性来精确控制背景图片的显示位置,以及相关的知识点。 首先,需要理解背景图片定位的基本概念。在一个网页元素上设置背景图片时,如果图片的尺寸小于元素的...
在CSS中,`background-position`属性是控制背景图像位置的核心。通过这个属性,我们可以精确地设置背景图像相对于其包含元素的位置。语法如下: ```css background-position: x-position y-position; ``` 这里的`x...
`background-position`属性非常关键,它决定了背景图片在元素内的起始位置。可以使用像素、百分比或其他长度单位来设定。例如,`background-position: 10px 20px;`表示图片的左上角距离元素左上角10像素水平偏移,...
`background-image`用于设置元素的背景图像,可以是一个URL指向的图片或使用CSS渐变。例如: ```css div { background-image: url('image.png'); } ``` `background-repeat`决定图像是否以及如何重复。它可以是`...
在CSS中,背景图片的位置可以通过`background-position`属性来调整,这个属性允许我们将背景图片放置在元素内的任意位置。在给定的例子中,我们深入探讨了如何使用负值来实现更精细的定位。 首先,我们要了解`...
CSS中的`background`属性是一个非常重要的样式规则,用于设置元素的背景效果,包括背景颜色、背景图像、背景重复方式、背景是否固定以及背景位置等。这个属性允许开发者在一个声明中控制多个背景属性,大大简化了CSS...