如何将背景图片定位到HTML元素的左上角和右下角？

Question

我有一个段落，希望为用户显示起始和结束的“标记”。

我可以在左上角显示背景图像，但是我不知道如何将背景图像定位到右下角。这是我的CSS代码，用于将图像定位到左上角：

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

我不希望使用额外的HTML元素来解决问题！！！它只能使用CSS工作！由于段落已经设置了伪前置和伪后置元素，所以我无法在这里使用它们。因此问题是：

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

- Thariama

---

建议尝试 { left: 0px ; top:0px; } - sree

Answer 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以获取跨浏览器支持情况

问候

汤姆

- Thomas Fellinger

Answer 2

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

- Cyrille

Answer 3

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

- Cyrille

---

我想要将图片（作为标记）显示在段落的两端，这只会将其切换到另一侧。 - Thariama

哦，抱歉我误解了。那么你应该研究所谓的生成内容，即使用:before或:after。 - Cyrille

我无法使用那些伪元素，因为段落已经设置了它们，否则我会覆盖它们，我忘记提到这一点并更新了我的问题。 - Thariama

好的，那么你要针对哪些浏览器？你可以使用CSS3多重背景，但并非所有浏览器都支持。 - Cyrille