我认为答案是否定的,但是你可以用CSS定位一个背景图像,这样它就离右边有一个固定数量的像素?
如果我设置x和y的背景位置值,似乎它们只分别从左边和上面给出固定的像素调整。
我认为答案是否定的,但是你可以用CSS定位一个背景图像,这样它就离右边有一个固定数量的像素?
如果我设置x和y的背景位置值,似乎它们只分别从左边和上面给出固定的像素调整。
据我所知,CSS规范并没有提供您所要求的内容,当然,除了CSS表达式之外。除去你不想使用表达式或Javascript的假设,我看到了三个hack的解决方案:
Make sure your background image matches the size of the container (at least in width) and set background-repeat: repeat or repeat-x if only the width is equalized. Then, having something appear x pixels from the right is as simple as background-position: -5px 0px. Using percentages for background-position exhibits special behaviour that is better seen than described here. Give it a shot. Essentially, background-position: 90% 50% will make the right edge of the background image line up 10% away from the right edge of the container. Create a div containing the image. Explicitly set the position of the containing element position: relative if not already set. Set the image container to position: absolute; right: 10px; top: 10px;, obviously adjusting the final two as you see fit. Place the image div container into the containing element.
试试这个:
#myelement {
background-position: 100% 50%;
margin-right: 5px;
}
注意上面的代码会将整个元素(不仅仅是背景图像)向右移动5px。这对你的案子来说可能没问题。
如果容器有固定高度: 微调百分比(背景位置),直到它正确匹配。
如果容器有一个动态高度: 如果你想在你的背景和容器之间填充(比如当自定义样式输入时,选择),将你的填充添加到你的图像,并将背景位置设置为右侧或底部。
当我试图让一个选择框的背景适合我选择的右边5像素时,我偶然发现了这个问题。在我的例子中,我的背景是一个箭头,它将取代基本的下拉图标。在我的例子中,背景的填充将始终保持不变(右边5-10个像素),所以对实际的背景图像进行修改是很容易的(使右侧的尺寸宽5-10个像素)。
希望这能有所帮助!
background-position: right 30px center;
它适用于大多数浏览器。完整列表见:http://caniuse.com/#feat=css-background-offsets。
更多信息:http://www.w3.org/TR/css3-background/#the-background-position
图像工作与透明像素在右边作为右边缘。
图像的变通方法是创建一个PNG或GIF图像(支持透明度的图像文件格式),在图像的右侧有一个透明的部分,恰好等于你想要给予右边距的像素数(例如:5px, 10px等)。
这在固定宽度和百分比宽度上都能很好地工作。 实际上,这是一个很好的解决方案,手风琴头有一个加/减或向上/向下箭头图像在头的右边!
缺点:不幸的是,你不能使用JPG,除非容器的背景部分和CSS背景图像的背景颜色是相同的平面颜色(没有渐变/小插图),主要是白色/黑色等。
求负值的解。调整右填充来移动图像。
<div style='overflow:hidden;'>
<div style='width:100% background:url(images.jpg) top right; padding-right:50px;'>
</div>
</div>
可以使用属性边框作为从右边开始的长度
background: url('/img.png') no-repeat right center;
border-right: 10px solid transparent;
您可以在编辑器中将背景图像定位为距离右侧x像素。
background: url(images_url) no-repeat right top;
背景图像将位于右上方,但将显示为距离右侧x个像素。
从左边调整百分比对我来说有点脆弱。当我需要这样的东西时,我倾向于将我的容器样式添加到包装器元素中,然后在内部元素上应用background-position: right bottom的背景
<style>
.wrapper {
background-color: #333;
border: solid 3px #222;
padding: 20px;
}
.bg-img {
background-image: url(path/to/img.png);
background-position: right bottom;
background-repeat: no-repeat;
}
.content-breakout {
margin: -20px
}
</style>
<div class="wrapper">
<div class="bg-img">
<div class="content-breakout"></div>
</div>
</div>
content-breakout类是可选的,如果需要,它将允许您的内容进入填充(负边距值应该与包装器填充中的相应值匹配)。这有点冗长,但工作可靠,无需考虑图像相对于其宽度和高度的相对位置。
有一种方法,但不是每个浏览器都支持(见这里的覆盖)
element {
background-position : calc(100% - 10px) 0;
}
它适用于所有现代浏览器,但IE9可能会崩溃。也没有覆盖=< IE8。
如果你碰巧在现代浏览器中碰到这个话题,你可以使用伪类:after来做任何与后台相关的事情。
.container:after{
content:"";
position:absolute;
right:20px;
background:url(http://lorempixel.com/400/200) no-repeat right bottom;
}
这个CSS会把背景放在“”的右下角。元素的右侧有20px的空间。
看看这个小提琴,例如http://jsfiddle.net/h6K9z/226/
这在Chrome 27中工作,我不知道它是否有效,也不知道其他浏览器能做什么。我对此感到很惊讶。
background: url(../img/icon_file_upload.png) top+3px right+10px no-repeat;
适用于所有真正的浏览器(以及IE9+):
background-position: right 10px top 10px;
我用它来RTL WordPress主题。 看例子:临时网站或真正的网站将很快上线。 看看大DIVs右下角的图标。
最合适的答案是background-position的新四值语法,但在所有浏览器都支持它之前,最好的方法是按照以下顺序组合之前的响应:
background: url(image.png) no-repeat 97% center; /* default, Android, Sf < 6 */
background-position: -webkit-calc(100% - 10px) center; /* Sf 6 */
background-position: right 10px center; /* Cr 25+, FF 13+, IE 9+, Op 10.5+ */
你可以在CSS3中这样做:
background-position: right 20px bottom 20px;
它适用于Firefox, Chrome, IE9+
来源:中数
我试图做一个类似的任务,让一个下拉箭头总是在表头的右侧,并提出了这个似乎在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编写的
对大家都好
background: url('../images/bg-menu-dropdown-top.png') left 20px top no-repeat !important;
另一个我没有看到提到的解决方案是使用伪元素,我相信这个解决方案将适用于任何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/