2016-04-10 24 views
0

background-imageプロパティに問題があります。 divscenaの背景にフィルムロールの画像を挿入しますが、background-image:url(img/rullino.png);には何も表示されません。背景画像が読み込まれない

FirebugをインラインでMozillaに書き込むと、動作します。

なぜこのようなことが起こるのか理解していますか?

/* tag */ 
 

 
body,html{ 
 
\t background-color: grey; 
 
\t font-family: 'Existence Light', arial, sans-serif; 
 
\t font-size: 1.8em; 
 
\t height:100%; 
 
} 
 

 
p { 
 
\t word-wrap:break-word; 
 
} 
 

 
/* ======= Generale sezioni ======= */ 
 

 
.sections{ 
 
\t min-height: 100%; 
 
} 
 

 
/* ======= Entry-section ======= */ 
 

 
#entry-logo img{ 
 
\t margin: 10% 0 0; 
 
} 
 

 
#entry-section #go-down{ 
 
\t margin-top: 9%; 
 
\t text-align: center; 
 
} 
 

 
#entry-section i{ 
 
\t content:"\f078"; 
 
\t color:white; 
 
} 
 

 
/* ======= film-section ======= */ 
 

 
#film{ 
 
\t height:100%; 
 
} 
 

 
#film > .container{ 
 
\t height:100%; 
 
\t padding:0; 
 
\t margin:0; 
 
\t width:100%; 
 
} 
 

 
.container > #rullino { 
 
\t height:20%; 
 
\t background-color:red; 
 
} 
 

 
body #film .container #rullino .scena { 
 
\t background-image: url(img/rullino.png); 
 
\t background-color: #00ff00; 
 
\t background-repeat: no-repeat; 
 
\t height:100%; 
 
\t width:15%; 
 
\t float:left; 
 
} 
 

 
#rullino img{ 
 
\t max-height:70%; 
 
}
<body> 
 
\t \t \t <section id="entry-section" class="sections"> 
 
\t \t \t \t <div class="container"> 
 
\t \t \t \t \t <div id="entry-logo"> 
 
\t \t \t \t \t \t <img src="img/logo.png" width="100%" alt="Un Autre Chien Andalou"> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t 
 
\t \t \t \t </div> 
 
\t \t \t \t <div id="go-down"> 
 
\t \t \t \t \t \t <i class="fa fa-chevron-down"></i> 
 
\t \t \t \t \t </div> 
 
\t \t \t </section> 
 
\t \t \t <section id="film" class="sections"> 
 
\t \t \t \t <div class="container"> 
 
\t \t \t \t \t <div id="rullino"> 
 
\t \t \t \t \t \t <div id="scena1" class="scena"> 
 
\t \t \t \t \t \t \t <p>scena1</p> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div id="scena2" class="scena"> 
 
\t \t \t \t \t \t \t <p>scena2</p> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div id="scena3" class="scena"> 
 
\t \t \t \t \t \t \t <p>scena3</p> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div id="scena4" class="scena"> 
 
\t \t \t \t \t \t \t <p>scena4</p> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div id="scena5" class="scena"> 
 
\t \t \t \t \t \t \t <p>scena5</p> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div>

+0

HTMLファイルとCSSファイルは同じフォルダにありますか? – dafilipaj

答えて

1

私は子犬のこの画像を使用してコードを試みたが、それは私のために働いていた: "http://g-ecx.images-amazon.com/images/G/01/img15/pet-products/small-tiles/23695_pets_vertical_store_dogs_small_tile_8.CB312176604.jpg"。

これはあなたのイメージのパスかもしれないようです。 "img/rullino.png"ではなく "./img/rullino.png"またはイメージの絶対パスを試して、現在のフォルダでイメージをチェックするようにしてください。また

、可読性+クリーナーCSSのためだけのヒント - あなたがクラスを持つすべてのdivのBGとして画像をしたい場合は「.scena」あなただけのこの操作を行う必要があります:

.scena { 
    background-image: url(img/rullino.png); 
    background-color: #00ff00; 
    background-repeat: no-repeat; 
    height:100%; 
    width:15%; 
    float:left; 
} 

希望します。

+0

何もない!私は子犬と同じことをして、それは動作しますが、パスでは動作しません。 私は別のパスを試しましたが、何もしませんでした。私がFirebugでコードをインラインで書くと、うまく動作します。言葉が出ません。 –

+0

'background-image:url(../ img/rullino.png)'で試してみました。 @ nreddy216あなたが言ったように、それはパスの問題でした。画像とCSSはサブディレクトリにあり、パスに '(../ img)'が必要です。 さようならと感謝 –

関連する問題