CSS负右背景位置

Posted

技术标签:

【中文标题】CSS负右背景位置【英文标题】:CSS negative right background position 【发布时间】:2013-01-12 05:45:36 【问题描述】:

我知道我可以像这样在背景图像上设置负左位置:

#element 
    background: url(image.png) -20px 0 no-repeat;

无论#element 的宽度如何,这会将背景图像定位在#element 左边缘的左侧20 像素处。

但是有没有办法设置一个负的right位置,没有#element一个固定的宽度(然后只设置一个高的正左值)?

【问题讨论】:

也就是说,将图像N px 定位到右边缘的左侧?不可能AFAIK。 【参考方案1】:

这种效果不可能通过简单的 CSS 获得,这根本不是真的。无需使用不必要的伪元素或多个 div 使您的标记复杂化。

您可以使用 CSS 中的“calc”函数让浏览器计算 100% 的容器宽度,然后像这样添加负边距(记得将负边距添加到 100% not 减去它):

background-position: calc(100% + 20px) 0;

或者,如果您更喜欢简写格式的标记:

background: url("image.png") calc(100% + 20px) 0 no-repeat;

这会将您的背景图像定位在其容器左侧 100% 的位置(从而获得与使用 background-position: right 相同的效果),并在其中添加 20px,您将获取您的负右边距。

你可以在这个 jsFiddle 中看到函数如何表现的演示:http://jsfiddle.net/58u665fe/

大多数主要浏览器都支持“计算”功能,但在某些情况下缺乏对 IE9http://caniuse.com/#feat=calc阅读更多关于哪些浏览器支持这个功能。

【讨论】:

【参考方案2】:

你想做的事不可能以你想做的方式。

一种解决方法可能是创建一个具有position: relative; 属性的父 div,然后对另一个 div 进行 z-index 处理,该 div 包含您的内容。

<style>
    #parent 
        position: relative; 
    
    #background 
        background: url(img.png) top left no-repeat;
        position: absolute;
        top: 0;
        left: -20px;
    
    #content 
        position: absolute;
        top: 0;
        left: 0;
    
</style>


<div id="parent">
    <div id="background"></div>
    <div id="content"></div>

【讨论】:

这很聪明!但你不是说right: -20px#background 而不是left: -20px 这取决于您希望它显示的位置。如果我是按问题来的,它实际上是top: -20px; left: 0px;,因为列出的第一个值是垂直位置,第二个是水平位置。【参考方案3】:

还有另一种方法可以在不更改标记的情况下实现此目的:

使用 :after 伪选择器,您可以将图像添加到任何块的右侧,尽管与实际的 css 背景不同

所以你可以这样做:

#element 
  position: relative;

#element:after
  content: "";
  background: transparent url(image.png) 0 0 no-repeat;
  position: absolute;
  right: -20px;
  top: 0;
  height: 50px /*add height of your image here*/ 
  width: 50px /*add width of your image here*/
  z-index: 1;  

#element *
  position: relative; 
  z-index: 2; /*this makes sure all the "background image" doesn't sit above the elements*/  

【讨论】:

此建议类似于this one,但我更喜欢后者(content: url(...); display:block;),因为它不需要指定widthheight

以上是关于CSS负右背景位置的主要内容,如果未能解决你的问题,请参考以下文章

CSS3背景大小和背景位置问题

预定义 CSS 背景图片中心位置和覆盖背景大小

为啥 CSS3 右对齐背景图片出现在错误的位置?

CSS 背景位置

CSS盒子模型外边距 ③ ( 插入图片 | 插入图片位置移动 - 修改外边距 | 背景图片 | 背景图片移动位置 - 修改背景位置 background-position )

CSS3 - 在精灵图像的“背景位置”之间淡入淡出