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

How can i position a background image to the top left and bottom right of a html element?

本文关键字：元素 左上角 右下角 html 背景 图像 定位      更新时间：2023-09-26

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

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

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

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

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

西里尔很近，但错了。 它需要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

迎接

汤姆

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

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

相关文章：