背景图像：使用 link 到 div 中的外部资源

Question

我想 link 将图像 url 转换为 div 以便该图像将用作 div 中内容的背景和水印。

当我将 url 设置为正文时，它会重复我不想要的图像。

<body style="background-color: white; background-image: url(https://preview.ibb.co/ntRarR/watermark3.png);">
...
</body>

当我在 div 中设置 url（我想要它的地方，它在 body 标签内）时，图像不会出现。

<div style="background-image: url(https://preview.ibb.co/ntRarR/watermark3.png); text-align: center">
...
</div>

非常感谢任何建议。

谢谢

Answer 1

使用这种方式调整图像不透明度

.bgdiv {
    position: relative;
    z-index: 1;
    width:450px;
    height:450px;
}

.bgdiv .bg {
    position: absolute;   
    background: url(https://preview.ibb.co/ntRarR/watermark3.png) no-repeat center center;
    background-size:100%;
    opacity: .4;
    width: 100%;
    height: 100%;
     z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

<div class="bgdiv">
    <div class="bg"></div>
    ...
</div>

对于 body 使用

background-repeat:no-repeat;background-size:cover;

body{
background-image: url(https://preview.ibb.co/ntRarR/watermark3.png); text-align: center;background-repeat:no-repeat;background-size:cover;}

Answer 2

确保您的 div 不为空。
使用属性背景:url('https://preview.ibb.co/ntRarR/watermark3.png'); 为您的 div.
如果将背景属性应用于正文标签，它将应用于整个网页。
如果您想将背景图片应用到 body 标签，请使用 背景尺寸：封面；（覆盖整个页面）。

背景图像：使用 link 到 div 中的外部资源

Background-image: Using a link to an external resource within a div

html

url

background

image

background-image