我认为答案是否定的,但是你可以用CSS定位一个背景图像,这样它就离右边有一个固定数量的像素?
如果我设置x和y的背景位置值,似乎它们只分别从左边和上面给出固定的像素调整。
我认为答案是否定的,但是你可以用CSS定位一个背景图像,这样它就离右边有一个固定数量的像素?
如果我设置x和y的背景位置值,似乎它们只分别从左边和上面给出固定的像素调整。
当前回答
你可以在CSS3中这样做:
background-position: right 20px bottom 20px;
它适用于Firefox, Chrome, IE9+
来源:中数
其他回答
适用于所有真正的浏览器(以及IE9+):
background-position: right 10px top 10px;
我用它来RTL WordPress主题。 看例子:临时网站或真正的网站将很快上线。 看看大DIVs右下角的图标。
background-position: right 30px center;
它适用于大多数浏览器。完整列表见:http://caniuse.com/#feat=css-background-offsets。
更多信息:http://www.w3.org/TR/css3-background/#the-background-position
另一个我没有看到提到的解决方案是使用伪元素,我相信这个解决方案将适用于任何CSS 2.1兼容的浏览器(≥IE8,≥Safari 2,…),它也应该是响应:
element::after
{
content:' ';
position:relative;
display:block;
width:100%;
height:100%;
bottom:0;
right:-5px; /* 10 px from the right of element inner-margin (padding) see example */
background:url() right center no-repeat;
}
Example: The element eg. a square sized 100px (without considering borders) has a 10px padding and a background image should be shown inside the right padding. This means the pseudo-element is a 80px sized square. We want to stick it to the right border of the element with right:-10px;. If we'd like to have the background-image 5px away from the right border we need to stick the pseudo-element 5px away from the right border of the element with right:-5px;... Test it for your self here : http://jsfiddle.net/yHucT/
如果容器有固定高度: 微调百分比(背景位置),直到它正确匹配。
如果容器有一个动态高度: 如果你想在你的背景和容器之间填充(比如当自定义样式输入时,选择),将你的填充添加到你的图像,并将背景位置设置为右侧或底部。
当我试图让一个选择框的背景适合我选择的右边5像素时,我偶然发现了这个问题。在我的例子中,我的背景是一个箭头,它将取代基本的下拉图标。在我的例子中,背景的填充将始终保持不变(右边5-10个像素),所以对实际的背景图像进行修改是很容易的(使右侧的尺寸宽5-10个像素)。
希望这能有所帮助!
我试图做一个类似的任务,让一个下拉箭头总是在表头的右侧,并提出了这个似乎在Chrome和Firefox中工作,但safari告诉我这是一个无效的属性。
background: url(http://goo.gl/P93P5Q) center right 10px no-repeat;
在检查器中折腾了一番之后,我想出了这个跨浏览器的解决方案,它适用于IE8+、Chrome、Firefox和Safari,以及响应式设计。
background: url(http://goo.gl/P93P5Q) no-repeat 95% center;
这里是它的外观和工作方式的代码依赖。Codepen是用SCSS - http://cdpn.io/xqGbk编写的