2017-11-24 3 views
-1

divコンテナを作成しようとしています。背景として透明な画像を使用し、div内に別の画像とテキストを含める必要があります。私は、次のdoind午前:背景画像がdivコンテナに表示されないのはなぜですか?

div { 
 
    width: 500px; 
 
    height: 500px; 
 
    background-image: url('explore_block.png'); 
 
}
<div> 
 
    <img src="img_girl.jpg" alt="icon"> 
 
    <p>This paragraph has its own background color.</p> 
 
</div>

私はすでにquesionをexisitngチェックしているため、背景を設定する方法を承知しています。ここの問題は、私が正しい方法でやっていると思っても、その背景は現れないということです。画像のパスは正しいです、私はすでにそれをテストしました。何か助けてもらえますか?ありがとう!:)

+1

' ''最初のを削除し、-img'も ' –

+0

を削除しない場合はしてみてください何?あなたは27分前の投稿を編集しました。そして@sutemeny Andrasは24分前に答えました..しかしあなたのコードはうまくいきます...エラーはありません。なぜあなたは彼の答えを受け入れましたか? –

+0

私は何をする予定ですか? –

答えて

1

それは簡単です。背景画像の後ろに二重コロンを置きました。 ;) これで動作します。

<head> 
    <style> 
    div { 
     width:500px; 
     height:500px; 
     background-image: url('explore_block.png'); 
    } 
    </style> 
    </head> 


<body> 
<div> 
<img src="img_girl.jpg" alt="icon"> 
<p>This paragraph has its own background color.</p> 
</div> 
</body> 


</html> 
+0

何? @Vanina Yordanovaは27分前に編集して、あなたは24分前に答えました..しかし、Vanina Yordanovaのコードはうまく動作します。修正するものは何もありません。笑:O :( –

+1

質問は答えです!笑: '( –

+0

:)ええ、 –

1

トリッキー1、あなたは

background-size: cover 

は、それがどのようになる参照してください使用して試みることができる、それは視覚的な表現:)

2

GER内部'を処分せずに参照するのは難しいですurl-img

div { 
    width: 500px; 
    height: 500px; 
    background: url(explore_block.png); 
} 

仕事フィドル:あなたのdivに次のCSSを追加https://jsfiddle.net/9acajpkk/2/

+1

と一緒に/無しに(アポストロフィー)'それは動作します..あなたはそれを知っていませんか? –

1

してみてください。

-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 

div { 
 
    width: 500px; 
 
    height: 500px; 
 
    background-image: url("explore_block.png"); 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
}
<div> 
 
    <img src="img_girl.jpg" alt="icon"> 
 
    <p>This paragraph has its own background color.</p> 
 
</div>

1

あなたのHTMLとCSSが正常に動作します..右の画像のパスを入力して、もう一度確認してください。

と/(アポストロフィ)' 'もそれが動作せず...

ワーキングJsfiddle

https://jsfiddle.net/klakshman318/koh7dx5z/1/

+0

質問を読む彼は 'css'で行った –

+0

https://jsfiddle.net/klakshman318/koh7dx5z/1/ –

1
Try this: 
<html> 
<head> 
<style type="text/css"> 
div { 
    width: 500px; 
    height: 500px; 
    background-image: url('backgroundimg.jpg'); 
} 
</style> 
</head> 
<body> 
<div> 
    <img src="logo.jpg" alt="icon"> 
    <p>This paragraph has its own background color.</p> 
</div> 
</body> 
</html> 
関連する問題