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

Question

我有一个段落,我希望有一个可见的"标记"来向用户显示段落的开头和结尾.

我没有问题在左上方显示backgroundimage,但我不知道如何将背景图像定位到右下方.这里我的css用于将图像定位到左上角:

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

我不是在寻找使用其他html元素的解决方案!它只需要使用css工作!由于段落已经设置了pseude-before和pseudo after元素,因此我无法在此处使用它们.所以问题是:

如何将背景图像定位到html元素的左上角和右下角,而不使用额外的html元素但仅使用css(并且没有伪元素)？

Answer 1

西里尔差不多错了.它需要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或时,确实引用了HTML元素本身的定位position:absolute

编辑:如果您想使用多个背景,您可以注意到以下内容:

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

招呼

汤姆