背景画像はresponsive.cssに読み込まれません

この問題は、レスポンシブCSSコードに読み込まれない画像で発生します。私はウェブサイトのさまざまな決議に従って背景イメージを変更しようとしています。私のコードの部分をhtmlとresponsive.cssに投稿します。私はすでにイメージへのパスをチェックし、イメージはhtml、css、responsiveを含むファイル内にあります。任意のヒントをどのように動作させるには？私は初心者ですが、それはhtmlとcssになります。背景画像はresponsive.cssに読み込まれません

HTML：

<body> 
    <figure id="background"></figure> 
</body>

はimgタグを削除し、フィギュアのタグに背景のIDを適用します。

#background { 
 
    width: 100vw; 
 
    background-position: center; 
 
    background-size: cover; 
 
} 
 

 
responsive.css: figure { 
 
    width: 100%; 
 
} 
 

 
@media (max-width: 992px) { 
 
    #background { 
 
    height: 50vh; 
 
    } 
 
} 
 

 
@media (min-width: 993px) and (max-width: 1170px) { 
 
    #background { 
 
    height: 70%; 
 
    width: 100%; 
 
    background-image: url('../zadanie-domowe-rwd-materialy/obrazy/man-2.jpg'); 
 
    } 
 
}

<figure> 
 
    <img src="zadanie-domowe-rwd-materialy/obrazy/man-1.jpg" alt="Zdjęcie nr 1" id="background"> 
 
</figure>

出典

2017-03-23 Anonymous

お試しください 'background-size：cover;' –

あなたは 'img'タグに' background image'を追加しています。しかし、 'img'タグの画像はレンダリングされる' background-image'の後ろにレンダリングされます。 –

px –

あなたのHTMLは、改正が必要です。

Imgタグは背景画像ではないため、すべての画像が背景の上に表示されます。条件を作成するには、両方の画像は、あなたもあなたのCSSにこれを追加する必要があります背景画像

としてのCSSの中に追加する必要があります。

#background { 
    position: relative; 
    height: 500px; // Or a different height 
    width: 100%; // Change to 100% of element or window 
    background-position: center; 
    background-size: cover; 
    // Add the follow 
    background-image: url('../zadanie-domowe-rwd-materialy/obrazy/man-1.jpg'); 
}

更新：コード全体

HTML

<body> 
     <figure id="background"></figure> 
    </body>

CSS

#background { 
    position: relative; 
    height: 500px; // Or a different height 
    width: 100%; // Change to 100% of element or window 
    background-position: center center; 
    background-size: cover; 
    background-image: url('http://placehold.it/350x150'); 
} 

@media (min-width: 992px) and (max-width: 1170px) { 
    #background { 
     background-image: url('https://unsplash.it/200/300'); 
    } 
}

は、私は、これは応答のみの.cssファイルを変更しないでHTMLについて

出典

2017-03-23 10:23:42 thisiskelvin

の背景の高さを与えて、あなたが書いたとおりにしようとしました。 Figureタブに背景を追加してCSSに背景画像を追加しましたが、まだ動作しません - 実際にはWebサイトに画像がロードされていません - 背景は画像なしの白です –

Make ＃バックグラウンドに高さを追加したことを確認してください。画像ではないため、背景画像の高さに自動的には拡大されません。この例ではheight：500pxを示しています。 – thisiskelvin

大丈夫、私はこの方法を試してみます –

を役に立てば幸いJsFiddle

を参照してください。あなたがcssでモバイルやその他のデバイスの使用でimgを変更したい場合はこのように Try it私はそれが役に立ちます。 https://jsfiddle.net/dup1d62k/4/

出典

2017-03-23 10:46:40

背景画像はresponsive.cssに読み込まれません

答えて

関連する問題