1. ホーム
  2. 質問と答え
  3. 背景画像が別のhtmlページに表示されない

背景画像が別のhtmlページに表示されない

2017-08-28 56 views
0

シンプルなブートストラップテンプレートを作成していますが、問題に直面しています。私の問題は私の背景イメージが表示されないことです。私は2つのhtmlページindex.htmlとindex2.htmlを持っているので、背景画像が別の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; 
}

私は私のindex.htmlの背景IMGがアップshowsingされていますが、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">&lsaquo;</a> 
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</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">&lsaquo;</a> 
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</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でテストを行う

enter image description here

です。私はこれを私のCSSに追加します

body{ 
    background:url('asset/header_bg.png')no-repeat; 

}

イメージが表示されています。したがって、100％はパスの問題ではありません

出典

2017-08-28 YVS1102

+0

'index'と' index2'は同じフォルダにありますか？あなたは、キャッシュをクリアするために、リフレッシュアイコンをクリックしている間、 'SHIFT 'を押し続けようとしましたか？また、そこには**たくさんのコードがあります - あなたは[**最小限の、完全で検証可能な例を提供してください]（http://stackoverflow.com/help/mcve）。 –

+0

@ObsidianAgeはい両方とも同じフォルダにあります – YVS1102

+0

@ObsidianAge Imoは、インデックスiでブートストラップ 'col-md-'を使用していないため、インデックス2に使用しています。それが問題になったのですか？ – YVS1102

答えて

0

<blockquote>要素が2番目のhtmlドキュメントにないと、バックグラウンドイメージのサイズが不足している（設定されていない）と思います。どういうわけか、背景画像のサイズはその要素に依存しています。 quoteクラスにいくつかの次元を追加すると、私はそれが役に立てば幸い

.quotes { 
    height: 600px; 
}

、すなわち：それを修正するようです！

出典

2017-08-28 06:02:39 Tedds

 関連する問題

  • 関連する問題はありません^_^