Question

正在尝试将我的svg图像定位到屏幕的一角。我试图添加背景位置：左上方；属性，但没有用。我已经包含了我的代码以及在浏览器中的外观图片。我仍在尝试找出问题所在。

.div1{
    background-image: url(../images/back.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: top left;
    height: 100vh;
}

<div class='container'>
    <div class='div1'>
        p
    </div>
    <div class='div2'>
        p
    </div>
</div>

谢谢！

Answer 1

此图像本身（svg）本身具有边距，请在.div1中尝试使用此边距，并使用以下值：

.div1 {
    background-image: url(../images/back.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: top left;
    height: 100vh;
    transform: translate(-10px,-10px);
 }

我不知道像素的确切值，您需要更改它们。.

我希望它能对您有所帮助：）

注意：此答案仅在svg具有边距时才有帮助，否则请参考其他答案

Answer 2

为“ background-origin”输入CSS属性，其值为border-box，用于将图像相对于border box而不是默认的padding box。

背景图像放置不正确

2 个答案: