html - 不显示背景图像 (HTML)

标签 html css

我无法显示背景图像。我认为添加 min-width 可能会使图像可见,以防它真的很小,但这没有用。我检查了网址。如果直接放入体内,它可以作为正常图像使用。

HTML:

<!DOCTYPE html>
<html>
<head>
<link rel = stylesheet href = Father.css>
<title> Very Important Company </title>
</head>
<body>
<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>
</p>
<div class = navigation>
<ul>
<li> SHOP </li>
<li> ABOUT US </li>
<li> RENTALS </li>
<li> CONTACT </li>
<li> PARTIES </li>
</ul>

</div>
</div>
<p>
<div class = main>
<p1> Our Eggs
</p1>
</div>
</body>     
</html>

CSS:

* {
    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 {
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;
}

最佳答案

background-image 中图像路径的格式是 url(...) 而不是 url (...)

所以你的台词应该是

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

关于html - 不显示背景图像 (HTML),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42105077/

相关文章:

jquery - 使用滚动条打印 jquery 对话框的内容

jquery - 如何在 jqgrid 表单编辑中保存数字输入类型的结果

html - 将链接设置为固定事件

javascript - 将 float div 的父级居中对齐

css - 设计登录 css Ionic

javascript - 具有较大显式宽度内容的水平居中 div 被剪裁

javascript - 将数组绑定(bind)到 AngularJS 中的指令变量

javascript - 限制下拉列表的范围

html - 创建我的菜单栏以随着浏览器大小的变化而调整大小

php - PHP + javascript 世界中的 dot net + flex 是什么?