背景图像不显示在不同的html页面
我正在创建一个简单的引导程序模板，但我遇到了问题。我的问题是我的背景图片没有显示。
.asheader{
background:url('asset/header_bg.png')no-repeat;
background-repeat:norepeat;
background-position: center;
background-size: contain;
}
.asfooter{
background-image:url('asset/footer_bg.png');
background-repeat:norepeat;
background-position: center;
background-size: contain;
}
我想知道为什么，因为我有2个html网页index.html和index2.html，在我的index.html背景img显示，但在index2.html背景不是出现。
这是我的index.html全页
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="asset/css/flexslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
@media (max-width: 766px){
img{
width:50%;
height:50%;
}
}
@media (min-width: 768px){
.navbar-nav{
float:none;
margin: 0 auto;
display: table;
table-layout: fixed;
}
}
.navbar.transparent.navbar-inverse .navbar-inner {
border-width: 0px;
-webkit-box-shadow: 0px 0px;
box-shadow: 0px 0px;
background-color: rgba(0,0,0,0.0);
background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(0,0,0,0.00)),color-stop( 100% , rgba(0,0,0,0.00)));
background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
}
#Intro {
display: inline-block;
}
#topnavbar {
top: 15px;
}
.carousel {
width:600px;
height:300px;
margin: 0 auto;
}
.lookbook{
width:600px;
height:auto;
margin: 0 auto;
}
.lookbook > h2{
text-align: center;
}
.ladiesroom{
width:600px;
height:300px;
margin: 0 auto;
}
.ladiesroom > h2{
text-align: center;
}
.afterlookbook{
width:630px;
height:300px;
margin: 0 auto;
}
.instagram{
width:630px;
height:auto;
margin: 0 auto;
border: 1px solid blue;
}
.instagram > h2{
text-align: center;
padding-bottom: 10px;
}
.carousel-inner > .item > img {
margin: 0 auto;
}
div.c-wrapper{
width: 100%;
margin: auto;
}
.navbar a {
color: black;
}
blockquote{
width:600px;
height:300px;
margin: 0 auto;
margin-top: 50px;
border: 2px 0px 2px 0px #000;
border: none;
}
blockquote:before {
color: #ccc;
content: open-quote;
font-size: 4em;
line-height: 0.1em;
margin-right: 0.25em;
vertical-align: -0.4em;
}
blockquote p {
display: inline;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img{
width: 100%; /* use this, or not */
margin: auto;
}
.container-fluid
{
padding-top: 50px;
background-size:100% auto;
}
.top-buffer { margin-top:10px; }
.asheader{
background:url('asset/header_bg.png')no-repeat;
background-repeat:norepeat;
background-position: center;
background-size: contain;
}
.asfooter{
background-image:url('asset/footer_bg.png');
background-repeat:norepeat;
background-position: center;
background-size: contain;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="asheader">
<div id="Intro" class="col-md-offset-5">
<img src="asset/logo_hitam.png" width="200px" height="50px">
</div>
<nav id="topnavbar" class="navbar transparent">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Promo</a></li>
<li><a href="#">Competition</a></li>
<li><a href="#">Ladies Room</a></li>
<li><a href="#">Need Help?</a></li>
</ul>
</div>
<!--- -->
</nav>
<div class="c-wrapper">
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<img src="https://dummyimage.com/600x300/000/fff">
</div>
<div class="item">
<img src="https://dummyimage.com/600x300/000/000">
</div>
<div class="item">
<img src="https://dummyimage.com/600x300/000/000">
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
<div class="lookbook">
<h2>Lookbook</h2>
<div id="" class="flexslider slide_thumb">
<ul class="slides">
<li>
<img src="asset/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_lemon.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_donut.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_caramel.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_lemon.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_donut.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_caramel.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_lemon.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_donut.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_caramel.jpg" />
</li>
</ul>
</div>
</div>
<div class="afterlookbook">
<div class="col-lg-6 col-sm-2 col-sm-12">
<img src="asset/mini-banner.jpg" width="100%" height="100%">
</div>
<div class="col-lg-6 col-sm-12">
<img src="asset/mini-banner.jpg" width="100%" height="100%">
</div>
<br><br>
<div class="top-buffer col-lg-6 col-lg-push-6 col-sm-12">
<img src="asset/quiz_mini-banner.jpg" width="100%" height="100%"></div>
<div class="top-buffer col-lg-6 col-lg-pull-6 col-sm-12">
<img src="asset/mini-banner.jpg" width="100%" height="100%"></div>
</div>
</div>
<blockquote style="border-top:5px solid black; border-bottom: 5px solid black;" class="quotes">
<p>asdfasdfasdfasdf</p>
</blockquote>
<div class="asfooter">
<div class="ladiesroom">
<h2>Ladie's Room</h2>
<table class="table table-bordered">
<tr>
<td><img src="http://via.placeholder.com/100x100"></td>
<td><img src="http://via.placeholder.com/100x100"></td>
<td><img src="http://via.placeholder.com/100x100"></td>
<td><img src="http://via.placeholder.com/100x100"></td>
<td><img src="http://via.placeholder.com/100x100"></td>
</tr>
</table>
</div>
<div class="instagram">
<h2>See The Latest On Instagram</h2>
<table class="table table-bordered">
<tr>
<td><img src="http://via.placeholder.com/100x100"></td>
<td><img src="http://via.placeholder.com/100x100"></td>
<td><img src="http://via.placeholder.com/100x100"></td>
<td><img src="http://via.placeholder.com/100x100"></td>
<td><img src="http://via.placeholder.com/100x100"></td>
</tr>
</table>
</div>
</div>
</div>
<script defer src="asset/js/jquery.flexslider.js"></script>
<script>
$(document).ready(function(){
$(window).resize(function() {
if ($(window).width() < 960) {
$('.navbar').removeClass('transparent');
$('.navbar').toggleClass('navbar-default');
}
else {
$('.navbar').toggleClass('transparent');
$('.navbar').removeClass('navbar-default');
}
})
})
$(document).ready(function() {
$('.slide_thumb').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 210,
itemMargin: 5,
asNavFor: '.slide_thumb',
itemWidth: 210,
itemMargin: 5,
minItems: 2,
maxItems: 4
});
});
</script>
</body>
</html>
这里是index2.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="asset/fontawesome/css/font-awesome.min.css">
<link rel="stylesheet" href="asset/css/flexslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
@media (min-width: 768px){
.navbar-nav{
float:none;
display: table;
table-layout: fixed;
}
}
.navbar.transparent.navbar-inverse .navbar-inner {
border-width: 0px;
-webkit-box-shadow: 0px 0px;
box-shadow: 0px 0px;
background-color: rgba(0,0,0,0.0);
background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(0,0,0,0.00)),color-stop( 100% , rgba(0,0,0,0.00)));
background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
}
#topnavbar,#bottomnavbar{
top: 15px;
}
#bottomnavbar{
height:100px;
}
.carousel-inner > .item > img {
margin: 0 auto;
}
div.c-wrapper{
width: 100%;
margin: auto;
}
.navbar a {
color: black;
}
.center-block {
margin-right: auto;
margin-left: auto;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar .navbar-collapse {
text-align: center;
}
.asheader{
background:url('asset/header_bg.png')no-repeat;
background-repeat:norepeat;
background-position: center;
background-size: contain;
}
.asfooter{
background-image:url('asset/footer_bg.png');
background-repeat:norepeat;
background-position: center;
background-size: contain;
}
blockquote{
border: none;
border-bottom: 1px solid #ccc;
border-top:1px solid #ccc;
}
</style>
</head>
<body>
<div class="asheader">
<div id="Intro" class="col-md-offset-5 col-md-5">
<img src="asset/logo_hitam.png" width="200px" height="50px">
</div>
<nav id="topnavbar" class="navbar transparent col-md-offset-2 col-md-8">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Promo</a></li>
<li><a href="#">Competition</a></li>
<li><a href="#">Ladies Room</a></li>
<li><a href="#">Need Help?</a></li>
</ul>
</div>
<!--- -->
</nav>
<div class="c-wrapper">
<div id="myCarousel" style="background:black !important" class="carousel slide col-md-offset-3 col-md-6">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<img src="https://dummyimage.com/600x300/000/fff">
</div>
<div class="item">
<img src="https://dummyimage.com/600x300/000/000">
</div>
<div class="item">
<img src="https://dummyimage.com/600x300/000/000">
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
<div class="lookbook col-md-offset-3 col-md-6 text-center">
<h2>Lookbook</h2>
<div id="" class="flexslider slide_thumb">
<ul class="slides">
<li>
<img src="asset/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_lemon.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_donut.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_caramel.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_lemon.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_donut.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_caramel.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_lemon.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_donut.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_caramel.jpg" />
</li>
</ul>
</div>
</div>
<div class="grid col-md-offset-3 col-md-6 text-center">
<table class="table">
<tr>
<td><img src="asset/mini-banner.jpg" width="100%" height="100%"></td>
<td> <img src="asset/mini-banner.jpg" width="100%" height="100%"></td>
</tr>
<tr>
<td>
<img src="asset/mini-banner.jpg" width="100%" height="100%">
</td>
<td> <img src="asset/mini-banner.jpg" width="100%" height="100%">
</td>
</tr>
</table>
</div>
<div class="quote col-md-offset-3 col-md-6 text-center">
<blockquote class="quote-card">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<cite>
Lorem I psum
</cite>
</blockquote>
</div>
</div>
<div class="lookbook col-md-offset-3 col-md-6 text-center">
<h2>Ladies Room</h2>
<div id="" class="flexslider slide_thumb">
<ul class="slides">
<li>
<img src="asset/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_lemon.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_donut.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_caramel.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_lemon.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_donut.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_caramel.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_lemon.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_donut.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_caramel.jpg" />
</li>
</ul>
</div>
</div>
<div class="instagram col-md-offset-3 col-md-6 text-center">
<h2>See The Latest On Instagram</h2>
<table class="table table-bordered">
<tr>
<td><img src="http://via.placeholder.com/120x120"></td>
<td><img src="http://via.placeholder.com/120x120"></td>
<td><img src="http://via.placeholder.com/120x120"></td>
<td><img src="http://via.placeholder.com/120x120"></td>
<td><img src="http://via.placeholder.com/120x120"></td>
</tr>
</table>
</div>
<div class="instagram col-md-offset-3 col-md-6 text-center">
<h2>SUBSCRIBE TO OUR NEWSLETTER</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<div class="input-group">
<input type="text" class="form-control"/>
<span class="input-group-addon">
<i class="fa fa-check"></i>
</span>
</div>
</div>
<nav id="bottomnavbar" class="navbar navbar-inverse col-md-12 fixed-bottom">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Promo</a></li>
<li><a href="#">Competition</a></li>
<li><a href="#">Ladies Room</a></li>
<li><a href="#">Need Help?</a></li>
</ul>
</div>
<!--- -->
</nav>
</div>
<script src="asset/js/jquery.flexslider.js"></script>
<script>
$(document).ready(function(){
$(window).resize(function() {
if ($(window).width() < 960) {
$('.navbar').removeClass('transparent');
$('.navbar').toggleClass('navbar-default');
}
else {
$('.navbar').toggleClass('transparent');
$('.navbar').removeClass('navbar-default');
}
})
})
$(document).ready(function() {
$('.slide_thumb').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 210,
itemMargin: 5,
asNavFor: '.slide_thumb',
itemWidth: 210,
itemMargin: 5,
minItems: 4,
maxItems: 4
});
});
</script>
</body>
</html>
任何解决方案？提前致谢。这是我的文件夹结构
我在index2进行测试。我在我的CSS中添加这个
body{
background:url('asset/header_bg.png')no-repeat;
}
图像显示出来。所以，100％不是路径问题
1 个答案:
答案 0 :(得分：0)
我猜第二个html文档中缺少//span[contains(text(),'Text1')]元素的事实导致背景图像尺寸也缺失（未设置）。不知何故，背景图像的大小取决于该元素。向<blockquote>类添加一些维度似乎可以解决它，即：
quote我希望它有所帮助！
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？