css3 - 如何实现 CSS 背景图片相对右边或者下边定位
问题描述
我们用 right 使背景图片右对齐,当背景所在节点的宽度高度不是固定时,但我想让他距离右边 10px,距离下边 10px,有没有好的实现方法?CSS
.loading {background: url(loading.gif) right bottom no-repeat;}
HTML
<p class='box loading'>some text</p>
问题解答
回答1:这个应该是直接操作盒子就好了吧,如果有内容的话直接设置盒子的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; }回答2:
background 好像解决不了你的问题, 不知道你是否要兼容ie6, position:fixed; 这属性ie6下是无效的。 如果需求不可更改的话我会给box加个相对定位,然后图片放进去再绝对定位,这样实现起来兼容性没问题,也解决了这个问题。
回答3:.loading { background-image: url(loading.gif); background-size: cover; background-repeat: no-repeat; background-position: -10px -10px;}
不过感觉这和图片大小有很大关系,供参考吧
相关文章:
1. javascript - jQuery post()方法,里面的请求串可以转换为GBK编码么?可以的话怎样转换?2. python3.x - python 中的maketrans在utf-8文件中该怎么使用3. javascript - 一排三个框,各个框的间距是15px,距离外面的白框间距也是15px,这个css怎么写?4. javascript - nodejs调用qiniu的第三方资源抓取,返回401 bad token,为什么5. html5 - vue-cli 装好了 新建项目的好了,找不到项目是怎么回事?6. javascript - immutable配合react提升性能?7. mysql - C#连接数据库时一直这一句出问题int i = cmd.ExecuteNonQuery();8. django - python 2层文件夹导入9. python - 用urllib抓取网页上的下载链接,目标文件是xls形式,但发现抓下来的xls是空表,里面只有一句报错信息,求帮助。10. javascript - vue 手机端项目在进入主页后 在进入子页面,直接按返回出现空白情况

网公网安备