Question

我正在尝试将以下代码添加到www.incahoot.org

上的子主题中

element.style {
    background-image: url(https://incahoot.org/wp- 
    content/uploads/2019/03/somerset.jpg);
    background-size: contain;
    background-repeat: no-repeat;
}

使背景图片（somerset.jpg）在移动设备上呈现更好的效果

但是...添加代码后什么也没发生

Answer 1

这似乎是因为您忘记了将其放在引号中，并且在两者之间有换行符这应该可以解决。

下次提示时，请同时包含其余HTML内容，并告诉我们您已经尝试过什么

element.style {
background-image: url('https://incahoot.org/wp-content/uploads/2019/03/somerset.jpg');
background-size: contain;
background-repeat: no-repeat;
}

小涂鸦：

（如果背景为100％绿色，则图像已被移动/删除）

body {
  background-image: url('https://incahoot.org/wp-content/uploads/2019/04/somerset_map.jpg');
  background-color: green;
  background-size: contain;
  background-repeat: no-repeat;
  margin: 0;
  height: 100vh;
}

Answer 2

您需要在元素标签内添加size属性或添加其他html标签。否则，它没有宽度/高度要添加背景。

尝试添加：

width: 200px;
height: 200px;

到element.style

Answer 3

尝试一下。使用背景图片时，您需要定义宽度和高度。

    <div class="classname"></div>
    .classname {
    background: url("https://incahoot.org/wp-content/uploads/2019/03/somerset.jpg") center no-repeat;
    background-size: contain;
    width: 400px;
    height: 400px;
}

为什么以下背景图像代码不起作用？

3 个答案: