7

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

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

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

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

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

4

3 回答 3

12

西里尔接近但错误。它需要是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;时确实指的是 HTML 元素本身的定位position:relativeposition: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以获得跨浏览器支持

打招呼

汤姆

于 2012-05-04T12:28:02.020 回答
4

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

于 2012-05-04T12:35:29.937 回答
1

尝试background-position: bottom right代替left top呢？

于 2012-05-04T12:20:32.330 回答