当前位置:asp编程网>技术教程>Css3教程>  正文

CSS实现背景图片右定位,背景图片显示在右边的方法

2020-08-06 12:29:15   来源:网络   作者:佚名   浏览量:3602   收藏

有时候,我们需要将背景图片显示在某一div的右边,用CSS怎么去实现?这里介绍五种方法:

1. 伪实现:嵌套元素实现类似效果
通过元素嵌套的方式,我们可以很容易实现这样的布局,外层元素加padding,flex布局、绝对定位、float这些方式都能实现,实现方式较为简单,这里我就不放代码了。

这类实现方式,由于嵌套了元素,并不是我们想要的实现效果。所以这是一种伪实现。

2. 蹩脚的实现:背景图片右侧添加透明像素
上图的效果中,图片右侧有10px的空隙,我们可以通过改变背景图,在右侧加上10px宽的透明像素,然后借助background-position的关键字就能实现上述的效果了。代码如下:
.bg-right {
  width: 500px;
  height: 120px;
  padding: 10px;
  margin: 50px auto;
  box-sizing: border-box;
  border: 10px solid rgba(255, 160, 122, 0.3);
  /* 背景图右侧添加10px宽透明像素(注释一下,其实url对应的图片并没有加) */
  background: url(https://p1.ssl.qhimg.com/t015bb5c7be246fb2af.jpg) no-repeat;
  /* 改变背景元素尺寸,原为80x80px */
  background-size: 90px 80px;
  line-height: 80px;
  font-size: 20px;
  background-position: right center;
}
这种方式,借助常规的方式就能实现上述效果,但是需要对背景图进行改动,如果空白间隙大小调整,就需要调整背景图,所以比较麻烦。不过,这个方法的好处是,兼容性很好。

3. 借助calc()函数实现
CSS中,我们可以借助calc()函数来进行加减乘除(+-*/)操作,并且可以进行混合单位的运算。

所以借助这一函数,我们可以如下实现:

.bg-right {
  /* ... */
  background: url(https://p1.ssl.qhimg.com/t015bb5c7be246fb2af.jpg) no-repeat;
  background-size: 80px 80px;
  background-position: calc(100% - 10px) 50%;
}
注意其中加号和减号两次需要添加空格,这是为了和负号作区分。

这一方法总的来说兼容性还好,只不过IE9在calc()和background-position结合使用的时候会导致浏览器崩溃,所以如果你要兼容IE9,不要使用该方法。

这种方式也有个不便利的地方时,calc()中减去的10px与padding相同,如果padding调整,这里也要调整。

4. 使用background-position的新语法
在CSS Backgrounds and Borders Module Level 3中,background-position引入了新语法,可以先写边界关键字,再写长度值。如下,我们可以这样实现:
.bg-right {
  /* ... */
  background: url(https://p1.ssl.qhimg.com/t015bb5c7be246fb2af.jpg) no-repeat right center;
  background-position: right 10px top 50%;
}
该方法不支持IE8和Safari7。不过我们可以通过上面的方式,在background缩写语法中,加入right center来作为后备,实现优雅降级。

该方法与使用calc()一样,如果padding调整,这里也要调整。

5. 使用background-origin指定背景图片摆放的参考位置
background-origin可以指定背景图片摆放的参考位置。支持以下三个值:border-box|padding-box|content-box。默认值为padding-box。

如果指定为border-box,则背景图会和边框重叠。如下所示:

背景图和边框重叠
通过content-box就可以实现我们前面所要的效果,代码如下。

.bg-right {
  /* ... */
  background: url(https://p1.ssl.qhimg.com/t015bb5c7be246fb2af.jpg) no-repeat right center;
  background-origin: content-box;
}
这个方法比较简洁明了,并且在padding发生变化时,无需做其他调整,所以最推荐这种。但是如果距离右边的距离大于padding的话,还是得借助第二和第三种方法。

至于兼容性,也是IE8及更早的浏览器不支持,Safari支持性还好。

关于背景图片实现右侧定位,今天就简单介绍这5种方法,希望能对你有帮助。


上一篇: CSS3 :last-child 选择器

下一篇: 无

关于我们-广告合作-联系我们-积分规则-网站地图

Copyright(C)2013-2017版权所属asp编程网