Javascript 如何将背景图像定位到 html 元素的左上角和右下角？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10448697/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can i position a background image to the top left and bottom right of a html element?
提问by Thariama
I got a paragraph and i wish to have a visible "marker" to show the start and end of the paragraph to the user.
我有一个段落，我希望有一个可见的“标记”来向用户显示段落的开头和结尾。
I got no problem to show the backgroundimage on the upper left, but i do not know how to position the background-image to the lower right end. Here my css for positioning the image to the upper left:
我在左上角显示背景图像没有问题，但我不知道如何将背景图像定位到右下端。这里我的 css 用于将图像定位到左上角：
p[class] {
background-image: url("../../image/my_image.gif");
background-position: left top;
background-repeat: no-repeat;
}
I am not looking for a solution using additional html elements!!! It needs to work using css only! Due to the fact that the paragraph has set pseude-before and pseudo after elements i am not able to use them here. So the question is:
我不是在寻找使用额外 html 元素的解决方案！！！它只需要使用 css 即可！由于该段落在元素之前设置了伪前和伪后，我无法在这里使用它们。所以问题是：
How can i position a background image to the top left and bottom right of a html element without using additional html elements but css only (and no pseudo elements)?
如何在不使用其他 html 元素但仅使用 css（并且没有伪元素）的情况下将背景图像定位到 html 元素的左上角和右下角？
回答by Thomas Fellinger
Cyrille is near but wrong. it needs to be background-position: right bottom;
Cyrille 接近但错误。它需要是background-position: right bottom;
in general - its posible to use numeric values.
So for background-position: right bottom;you can also write background-position: 100% 100%;and background-position: left top;would result in background-position: 0 0;
一般来说 - 可以使用数值。所以对于background-position: right bottom;你也可以写background-position: 100% 100%;并且background-position: left top;会导致background-position: 0 0;
also take a look at the W3C specs on this: http://www.w3.org/TR/css3-background/#the-background-position
还可以查看 W3C 规范： http://www.w3.org/TR/css3-background/#the-background-position
to sree's comment of above: this is completely wrong, left: 0px ; top:0px;does refer on positioning of the HTML element itself when using position:relativeor position:absolute
sree 的上述评论：这是完全错误的，left: 0px ; top:0px;在使用position:relative或position:absolute
edit: if you like to use multiple backgrounds you can note it als follows:
编辑：如果你喜欢使用多个背景，你可以注意到它如下：
p[class] {
background-image: url("../../image/my_image.gif"), url("../../image/my_image.gif");
background-position: left top, right bottom;
background-repeat: no-repeat;
}
look at http://caniuse.com/#feat=multibackgroundsfor cross browser support
查看http://caniuse.com/#feat=multibackgrounds以获得跨浏览器支持
greets
问候
tom
汤姆
回答by Cyrille
If browser support is not a problem for you, you could do with CSS3 multiple backgrounds: http://www.css3.info/preview/multiple-backgrounds/
如果浏览器支持对您来说不是问题，您可以使用 CSS3 多背景：http: //www.css3.info/preview/multiple-backgrounds/
回答by Cyrille
What about trying background-position: bottom rightinstead of left top?
尝试background-position: bottom right而不是left top?
