1、background-position:0 0; 背景图片的左上角将与容器元素的左上角对齐。该设置与background-position:left top;或者background-position:0% 0%;设置的效果是一致的。例如: .container{ width:300px; height:150px; background:transparent url(bg.jpg) no-repeat scroll 0 0; border:5px solid green; }...
以下是几个实际的例子来演示background-position的用法: 1.指定背景图片居中对齐 background-position: center; 2.指定背景图片距离左边界10像素,垂直方向上居中对齐 background-position: 10px center; 3.指定背景图片距离右边界20像素,垂直方向上距离底部30像素 background-position: right 20px bottom 30px; 4.使...
background-position的用法 background-position是CSS中控制背景图像位置的一个属性。使用background-position可以改变背景图片在元素中的定位位置。这个属性需要设置两个值,以水平和垂直方向的像素数值来控制图像位置。在实际开发中,background-position可以根据设计要求,对背景图像进行细微的调整,使其在视觉效果上更加优美。
一、background-position赋值时的等价写法 1、top left, left top 等价于 0% 0%. 2、top, top center, center top 等价于 50% 0%. 3、right top, top right 等价于 100% 0%. 4、left, left center, center left 等价于 0% 50%. 5、center, center center 等价于 50% 50%. ...
background-position 属性可以用其它数值,关键词和百分比来指定,这比较有用,尤其是在元素尺寸不是用像素设置时。 关键词是不用解释的。x 轴上: * left* center* right y 轴上: * top* center* bottom 顺序方面和使用像素值时的顺序几乎一样,首先是 x 轴,其次是 y 轴,像这样: ...
要想实现CSS抠图,只需要用到一个属性:background-position。 按照字面理解,这个属性就是背景定位,先看看google网站的素材图,如下: 假如小菜现在想做一个+1按钮,利用上边的素材图,普通状态显示A图,鼠标移上去显示后显示B图,实现这么一个动态效果。 按钮是用来实现功能的,一般是用超链接响应单击事件,但是不能把背景...
定义和用法 CSS background-position属性设置背景图像的起始位置。 这个属性设置背景原图像(由CSS background-image定义)的位置,背景图像如果要重复,将从这一点开始。 提示:您需要把CSS background-attachment属性设置为"fixed",才能保证该属性在Firefox和Opera中正常工作。
background-position属性在雪碧图中的用法 使用雪碧图之前,我们需要知道雪碧图中各个图标的位置。 从上面的图片可以看出雪碧图中各个小图标(icon)在整张雪碧图的起始位置,例如第一个图标(裙子)在雪碧图的起始位置为 x:0,y:0,第二个图标(鞋子)在雪碧图的起始位置为 x:0,y:50px,第三个图标(足球)在雪碧图的...
background-position1.04.01.01.03.5 定义和用法 background-position 属性设置背景图像的起始位置。 这个属性设置背景原图像(由background-image定义)的位置,背景图像如果要重复,将从这一点开始。 提示:您需要把background-attachment属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作。