使用CSS将背景图片从右侧偏移

7 浏览
0 Comments

使用CSS将背景图片从右侧偏移

有没有办法将背景图片从其元素的右侧定位一定数量的像素？例如，要将某物定位到离左侧一定数量的像素（比如10像素），可以这样做：

#myElement {
    background-position: 10px 0;
}

0

3 答案

0 Comments

问题的出现原因是需要将背景图像从右侧偏移一定距离。解决方法是使用CSS中的百分比。虽然这不完全符合问题中要求的像素精度，但如果只需要在图像的右侧边缘和其他内容之间添加一小段间距，将某个元素的位置设置为99%通常足够好。

代码：

/* 将图像与容器的垂直中心和水平右侧对齐，并在右边缘之间添加一小段间距 */
div.middleleft {
  background: url("/images/source.jpg") 99% center no-repeat;
}

+1 "我们下周将介绍像素对齐" - 这个方法总是有效的。

这种解决方法在大多数浏览器上都能正常工作。

0
0 Comments

在CSS3之前，无法直接使用CSS来将背景图片从其元素的右侧偏移一定的像素。目前，有几种常用的解决方法：

1. 设置元素的margin-right属性来实现偏移。这种方法通过调整元素的外边距来实现背景图片的右侧偏移。

2. 在背景图片本身添加透明像素，并将其定位在top right位置。通过在图片中添加透明像素，然后将其定位在右上角位置，从而实现背景图片的右侧偏移。

3. 使用jQuery在元素的宽度已知后计算位置。通过使用jQuery，可以在元素的宽度已知后计算出背景图片的正确位置。

不过，好消息是，CSS3中对于扩展的background-position属性的支持正在不断完善，很快就可以直接使用CSS来实现背景图片的右侧偏移。更多关于CSS3 'background-position'的支持情况可以参考：stackoverflow.com/questions/501375/…

0
0 Comments

在CSS中通过偏移背景图像从右边进行偏移的功能对我很有帮助。根据我所知，这在IE8中不被支持，在最新版的Chrome和Firefox中可以正常工作。可以在Can I use网站上查看支持该功能的浏览器的详细信息。来源于：http://tanalin.com/en/blog/2011/09/css3-background-position/

更新：

这个功能现在在包括移动浏览器在内的所有主流浏览器中都得到支持。这很棒，但不幸的是，在Safari 5.1.7上不起作用（对于手机用户来说非常重要）。

它现在在移动设备上工作正常（在Android、iOS和WindowsPhone上进行了检查）。但是Safari 5.1.7仍然不支持像这样给出的背景位置。我正在使用这个方法，并为较旧的浏览器提供了一个百分比的回退，例如background-position: 95% center; background-position: right 13px center;

不确定还有多少人在使用不支持这个功能的浏览器。Safari用户现在应该使用更新的版本，尽管仍然有很多旧的Android设备。对于这些设备，使用百分比回退就可以了（尽管不完全相同）。

请注意，这仅在水平和垂直位置上都指定了基本位置（如right、left、top、bottom）时才有效。例如，以下将无法渲染：background-position: right 10px 10px，但应该写成background-position: right 10px top 10px。

感谢你的评论，节省了我很多时间=）

我只是想知道，在2020年，对于这个right、left、top和bottom，我们是否可以使用calc来结合它们？因为我尝试了几次都没有变化，也许有人找到了解决办法？

这里有一个很好的教程解释了这种方法：css-tricks.com/positioning-offset-background-images

0