背景图像:使用div中外部资源的链接

时间:2017-10-17 14:37:13

标签: html image url background background-image

我想将图片网址链接到div,以便将图片用作div中内容的背景和水印。

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

<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>

非常感谢任何建议。

由于

2 个答案:

答案 0 :(得分:1)

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

structure(list(`#00e41e6a-9fe7-44f9-978b-7b05b179506a` = c(1, 
1, NA, NA, NA, NA, NA, NA, NA, 1, 2, 1, NA, NA, 2, NA, 3, 1, 
1, NA, NA, NA, 2, NA, 1, NA, NA, NA, NA, 1, 1, 1, NA, NA, 1, 
NA, NA), `#aca312ab-6dbd-4183-8b22-8f37834f3426` = c(NA, NA, 
NA, 1, NA, 1, NA, 2, 1, NA, 2, 1, 1, 1, NA, NA, NA, 1, 1, 1, 
NA, 1, 2, 1, NA, 1, NA, 1, NA, NA, 1, NA, 1, NA, 1, 1, 1), `#0730216b-c201-443c-9092-81e23fd13c6c` = c(NA, 
NA, NA, NA, NA, NA, 2, NA, NA, NA, NA, NA, 1, NA, NA, 1, NA, 
NA, NA, NA, 1, NA, NA, NA, NA, NA, 2, NA, NA, NA, NA, NA, NA, 
2, 1, NA, NA), `#acd5ceef-c5cf-4e95-9394-c50fdbc70c8d` = c(NA, 
NA, 2, NA, 2, NA, 2, NA, NA, NA, NA, NA, NA, NA, NA, NA, 2, NA, 
NA, NA, NA, 1, NA, NA, NA, NA, NA, NA, 1, NA, 1, NA, NA, NA, 
1, NA, NA)), .Names = c("#00e41e6a-9fe7-44f9-978b-7b05b179506a", 
"#aca312ab-6dbd-4183-8b22-8f37834f3426", "#0730216b-c201-443c-9092-81e23fd13c6c", 
"#acd5ceef-c5cf-4e95-9394-c50fdbc70c8d"), row.names = c(1L, 2L, 
4L, 6L, 8L, 10L, 11L, 16L, 20L, 22L, 23L, 30L, 32L, 37L, 38L, 
43L, 45L, 46L, 47L, 49L, 50L, 53L, 62L, 64L, 65L, 67L, 68L, 69L, 
70L, 71L, 73L, 74L, 76L, 77L, 79L, 80L, 81L), class = "data.frame")
.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>

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

答案 1 :(得分:1)

  • 确保您的div不为空。
  • 使用属性 的背景:网址(&#39; https://preview.ibb.co/ntRarR/watermark3.png&#39); 为你的div提供背景。

  • 如果将背景属性应用于body标签,则会将其应用于  整个网页。

  • 如果要将背景图像应用于body标签,请使用 background-size :封面; (覆盖整个页面)。