Question

我无法显示背景图像。我认为添加最小宽度可能会使图像可见，以防它真的很小，但这不起作用。我查了一下网址。如果直接放入体内，它可以作为正常图像。

HTML：

Predicate

CSS：

assertThat(Actual, isIdenticalTo(Expected)
    .withAttributeFilter(a -> !"base".equals(a.getName())))

Answer 1

background-image中图片路径的格式为url(...)而非url (...)

所以你的行应该是

background-image: url(http://files.vividscreen.info/soft/fc5e9b0dc8833c69951d28bb856b9ef4/Decorated-Easter-Eggs-2880x1920.jpg);

Answer 2

我认为你应该使用bakground-image属性而不是content

background-image:url(http://files.vividscreen.info/soft/fc5e9b0dc8833c69951d28bb856b9ef4/Decorated-Easter-Eggs-2880x1920.jpg);

Answer 3

这是你的css

.main {
color: black;
font-size: 60px;
position: relative;
top: 150px;
background-image: url (http://files.vividscreen.info/soft/fc5e9b0dc8833c69951d28bb856b9ef4/Decorated-Easter-Eggs-2880x1920.jpg);
min-width: 100%;
height: 900px;
border: 2px solid red;
padding-top: 100px;
}

url中的(http://files.vividscreen.info/soft/fc5e9b0dc8833c69951d28bb856b9ef4/Decorated-Easter-Eggs-2880x1920.jpg);和background-image:之间有空格。删除空格，它应该工作。

Answer 4

您好，只需删除background-image:url之前的空格，然后检查它（代码如下）并关闭div中的<div id=backs> </div>标记

background-image: url(http://files.vividscreen.info/soft/fc5e9b0dc8833c69951d28bb856b9ef4/Decorated-Easter-Eggs-2880x1920.jpg);

demo

Answer 5

* {
    margin: 0;
    padding: 0;
}

#backs {
     background: white;
     }

#gecko {
    content:url(http://www.unixstickers.com/image/data/stickers/opensuse/Opensuse-logo-wob.sh.png);
height: 128px;
width: 128px;
position: relative;
float: left;
margin-left: 10px; 
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
display: inline;
}

li {
display: inline;
padding-left: 50px;
min-width: 100%
}

.navigation {
color: black;
letter-spacing: 2px;
float: right;
vertical-align: top;
width: 800px;
height: 70px;
margin-top: 47px;
min-width:800px;
padding-left: 150px;
position: absolute;
}


.main {
    background: rgba(0, 0, 0, 0) url("http://files.vividscreen.info/soft/fc5e9b0dc8833c69951d28bb856b9ef4/Decorated-Easter-Eggs-2880x1920.jpg") repeat scroll 0 0;
    border: 2px solid red;
    color: black;
    font-size: 60px;
    height: 900px;
    min-width: 100%;
    padding-top: 100px;
    position: relative;
    top: 150px;
}

<div id ="backs"></div>
<div class ="header">
<p>
<img src = "http://www.unixstickers.com/image/data/stickers/opensuse/Opensuse-logo-wob.sh.png id = gecko" alt="">
</p>
<div class ="navigation">
<ul>
<li> SHOP </li>
<li> ABOUT US </li>
<li> RENTALS </li>
<li> CONTACT </li>
<li> PARTIES </li>
</ul>

</div>
</div>

<div class ="main">
<p1> Our Eggs
</p1>

</div>

背景图片无法显示（HTML）

5 个答案: