为什么我使用下面的代码看不到图像。我正在尝试通过 css 文件加载它。 main.css 也是 index.php 所在的位置。
<!DOCTYPE html>
<html>
<head>
<title>Red Stone One Stop Shop</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css " />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<meta name="viewport" content="width=device-width, initial-scale=1,user-scaleable=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" id="navbar">
<div class="container">
<a href="/ecommerce/index.php" class="navbar-brand" id="text">Red Stone One Stop Shop</a>
<ul class="nav navbar-nav">
<!-- Dropdown menu -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" id="text">Men <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Shirts</a></li>
<li><a href="#">Pants</a></li>
<li><a href="#">Shoes</a></li>
<li><a href="#">Accessories</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<!--Inserting Images-->
<div id="background-image">
<div id="image-1"></div>
<div id="image-2"></div>
</div>
<p>
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</body>
</html>
这是main.css文件
body{
padding-top: 50px;
}
#navbar{
/*background color: #FFF0000;*/
background-color: #800000;
}
/*change color to white*/
#text{
background-color: #000000;
color: #FFFFFF;
}
#background-image{
position: relative;
padding: 0;
margin: 0;
overflow: hidden;
height: 60px;
background-image: url(../images/background.jpg);
background-repeat: no-repeat;
background-size: 100% 700px;
background-position: top center;
background-attachment: fixed;
}
#image-1{
position: absolute;
width: 100%
height: 350px;
background-image: url(../images/ecommerce2.jpg);
background-repeat: no-repeat;
background-position: left bottom;
background-size: auto 200px;
top: -100px;
left: -25px;
}
#image-2{
position: absolute;
width: 100%
height: 190px;
background-image: url(../images/ecommerce1.jpg);
background-repeat: no-repeat;
background-position: left bottom;
background-size: 50% 200px;
top: 80%;
margin-top: -90px;
}
我可以看到背景，但没有显示 2 个图像。感谢您的帮助。
最佳答案
css 语法错误你缺少分号; 宽度属性
#image-1{
position: absolute;
width: 100%;
height: 350px;
background-image: url(../images/ecommerce2.jpg);
background-repeat: no-repeat;
background-position: left bottom;
background-size: auto 200px;
top: -100px;
left: -25px;
}
#image-2{
position: absolute;
width: 100%;
height: 190px;
background-image: url(../images/ecommerce1.jpg);
background-repeat: no-repeat;
background-position: left bottom;
background-size: 50% 200px;
top: 80%;
margin-top: -90px;
}
关于html - 图片不显示使用 css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39079092/