如何将背景图像定位到 html 元素的左上角和右下角？答案

【问题标题】：How can i position a background image to the top left and bottom right of a html element?如何将背景图像定位到 html 元素的左上角和右下角？
【发布时间】：2012-05-04 12:18:39
【问题描述】：

我有一个段落，我希望有一个可见的“标记”来向用户显示段落的开头和结尾。

在左上角显示背景图像没有问题，但我不知道如何将背景图像定位到右下端。这是我用于将图像定位到左上角的 css：

p[class] {
    background-image: url("../../image/my_image.gif");
    background-position: left top;
    background-repeat: no-repeat;
}

我不是在寻找使用额外 html 元素的解决方案！！！它只需要使用 css 即可！由于该段落设置了伪之前和伪之后元素，我无法在此处使用它们。所以问题是：

如何在不使用其他 html 元素但仅使用 css（且不使用伪元素）的情况下将背景图像定位到 html 元素的左上角和右下角？

【问题讨论】：

建议尝试 { left: 0px ;顶部：0px； }

标签： javascript html css background background-image

【解决方案1】：

Cyrille 接近但错误。必须是background-position: right bottom;

一般来说 - 可以使用数值。所以对于background-position: right bottom; 你也可以写background-position: 100% 100%; 和background-position: left top; 会导致background-position: 0 0;

还可以查看 W3C 规范：http://www.w3.org/TR/css3-background/#the-background-position

sree 上面的评论：这是完全错误的，left: 0px ; top:0px; 在使用 position:relative 或 position:absolute 时确实指的是 HTML 元素本身的定位

编辑：如果您喜欢使用多个背景，您可以注意以下几点：

p[class] {
    background-image: url("../../image/my_image.gif"), url("../../image/my_image.gif");
    background-position: left top, right bottom;
    background-repeat: no-repeat;
}

查看http://caniuse.com/#feat=multibackgrounds 以获得跨浏览器支持

问候

汤姆

【讨论】：

【解决方案2】：

如果浏览器支持对您来说不是问题，您可以使用 CSS3 多背景：http://www.css3.info/preview/multiple-backgrounds/

【讨论】：

【解决方案3】：

试试background-position: bottom right而不是left top怎么样？

【讨论】：

我希望图像（作为标记）显示在段落的两端，这只会将其切换到另一侧
哦，对不起，我误解了。然后你应该看看所谓的生成的内容，即使用:before或:after。
我无法使用这些伪元素，因为段落已经设置了它们，否则我会覆盖它们，忘记提及这一点并更新了我的问题
好的，那么您的目标是哪些浏览器？您可以使用 CSS3 多背景，但并非所有地方都支持它们。
+1 为您的努力和您的工作解决方案（您的其他答案）我会赞成您的两个答案，但接受 Thomas Fellinger 的答案