css3 - 如何实现 CSS 背景图片相对右边或者下边定位-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

css3 - 如何实现 CSS 背景图片相对右边或者下边定位

PHP中文网 2017-04-17 11:02:07

[CSS3讨论组]

1057

我们用 right 使背景图片右对齐，当背景所在节点的宽度高度不是固定时，但我想让他距离右边 10px，距离下边 10px，有没有好的实现方法？
CSS

.loading {
background: url(loading.gif) right bottom no-repeat;
}

HTML

<p class="box loading">some text</p>

PHP中文网

认证高级PHP讲师

全部回复(3)

PHP中文网2017-04-17 11:04:07 3楼

这个应该是直接操作盒子就好了吧，如果有内容的话直接设置盒子的padding-right和padding-bottom，然后让图片显示在右下角就好了0_0....总的思想都是通过盒子控制背景的位置。

没想到你的盒子里头还有别的内容

.loading { 
    /*box position*/
    position:fixed; 
    right:10px; 
    bottom:10px; 
    /*background*/
    width:30px;
    height:30px;
    background:url(loading.gif) no-repeat; 
}

赞 +0

添加回复

怪我咯2017-04-17 11:04:07 2楼

background 好像解决不了你的问题, 不知道你是否要兼容ie6, position:fixed; 这属性ie6下是无效的。如果需求不可更改的话我会给box加个相对定位，然后图片放进去再绝对定位，这样实现起来兼容性没问题，也解决了这个问题。

赞 +0

添加回复

PHPz2017-04-17 11:04:07 1楼

.loading {
    background-image: url(loading.gif);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: -10px -10px;
}

不过感觉这和图片大小有很大关系，供参考吧

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>