我认为答案是否定的,但是你可以用CSS定位一个背景图像,这样它就离右边有一个固定数量的像素?
如果我设置x和y的背景位置值,似乎它们只分别从左边和上面给出固定的像素调整。
我认为答案是否定的,但是你可以用CSS定位一个背景图像,这样它就离右边有一个固定数量的像素?
如果我设置x和y的背景位置值,似乎它们只分别从左边和上面给出固定的像素调整。
当前回答
从左边调整百分比对我来说有点脆弱。当我需要这样的东西时,我倾向于将我的容器样式添加到包装器元素中,然后在内部元素上应用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类是可选的,如果需要,它将允许您的内容进入填充(负边距值应该与包装器填充中的相应值匹配)。这有点冗长,但工作可靠,无需考虑图像相对于其宽度和高度的相对位置。
其他回答
您可以在编辑器中将背景图像定位为距离右侧x像素。
background: url(images_url) no-repeat right top;
背景图像将位于右上方,但将显示为距离右侧x个像素。
这个问题已经被问到很久了,但我刚刚遇到了这个问题,我是这样做的:
background-position:95% 50%;
background-position: right 30px center;
它适用于大多数浏览器。完整列表见:http://caniuse.com/#feat=css-background-offsets。
更多信息:http://www.w3.org/TR/css3-background/#the-background-position
如果你碰巧在现代浏览器中碰到这个话题,你可以使用伪类: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/
只需将像素填充到图像中-在photohop中添加10px或任何图像的画布大小,并在CSS中对齐它。