上图的效果中,图片右侧有10px的空隙,我们可以通过改变背景图,在右侧加上10px宽的透明像素,然后借助background-position的关键字就能实现上述的效果了。代码如下: 代码语言:javascript 复制 .bg-right{width:500px;height:120px;padding:10px;margin:50px auto;box-sizing:border-box;border:10px solidrgba(255,160...
上图的效果中,图片右侧有10px的空隙,我们可以通过改变背景图,在右侧加上10px宽的透明像素,然后借助background-position的关键字就能实现上述的效果了。代码如下: .bg-right{width:500px;height:120px;padding:10px;margin:50px auto;box-sizing:border-box;border:10px solidrgba(255,160,122,0.3);/* 背景图...
background-position的取值除了百分比值和绝对值,还有5个关键字可以使用:top、right、bottom、left和center。 background-position的取值可以是一个值(百分比、关键字或一个绝对值长度),或2个值(三种取值方式的组合)或4个值(关键字和绝对值)。 background-position: top left; background-position: 50px 30%; bac...
div{width:300px;height:300px;border:black 2px solid;padding:3px;position:relative;left:300px}a{width:100px;height:100px;background:pink;display:block;text-align:center;line-height:100px;text-decoration:none;position:absolute;}a:hover{background:deepskyblue;}#a2{top:3px;left:203px;}#a3{top...
background-position:00,center;/* Edge offsets values */background-position:bottom 10px right 20px;background-position:right 3em bottom 10px;background-position:bottom 10px right;background-position:top right 10px;/* Global values */background-position:inherit;background-position:initial;back...
The background-position CSS property sets the initial position for each background image. The position is relative to the position layer set by background-origin.
position :top | center | bottom | left | center | right 说明: 设置或检索对象的背景图像位置。必须先指定 background-image 属性。 该属性定位不受对象的补丁属性( padding )设置影响。 默认值为: 0% 0% 。此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角。
UC Browser for Android 12.12: Supported Samsung Internet 4 - 16.0: Supported 17.0: Supported QQ Browser 10.4: Supported Baidu Browser 7.12: Supported KaiOS Browser 2.5: Supported Resources: Basic information MDN Web Docs - background-position...
position:00,center;/* Edge offsets values */background-position:bottom 10px right 20px;background-position:right 3em bottom 10px;background-position:bottom 10px right;background-position:top right 10px;/* Global values */background-position:inherit;background-position:initial;background-position...
1 background-repeat 设置或检索对象的背景图像如何铺排填充。必须先指定background-image属性。 1 background-clip 指定对象的背景图像向外裁剪的区域。 3 background-origin S设置或检索对象的背景图像计算background-position时的参考原点(位置)。 3 background-size 检索或设置对象的背景图像的尺寸大小。 3边框...