完全な背景画像ファイルを表示する方法

-2

完全な背景画像を表示できないという問題が発生しました。完全な背景画像ファイルを表示する方法

コードは次のとおりです。私はうまくいくと思いますが、うまくいきません。イメージは行数に基づいてのみ表示されます。

フルサイズのイメージを表示する方法を教えてください。あなたの質問を再考した後

<!DOCTYPE html> 
 
<html lang="ja"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>test</title> 
 
    <style type="text/css"> 
 
    <!-- .tests { 
 
     background: url(contents01_left_bg.png); 
 
     background-position: center top; 
 
     background-attachment: fixed; 
 
     background-repeat: no-repeat; 
 
     -moz-background-size: cover; 
 
     background-size: cover; 
 
    } 
 
    
 
    --> 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div class="tests"> 
 
    a</br> 
 
    a 
 
    </div> 
 
</body> 
 

 
</html>

出典

2017-05-31 Yoshihide Nishimoto

あなただけの必要があります：「背景： 'URL（contents01_left_bg.png）;'と '背景サイズ：カバーを;'。 'background-size'はどこでもサポートされており、ベンダープレフィックスは必要ありません。また、CSSスタイルシート内でHTMLコメント構文を使用しないでください。 –

背景画像のサイズは？ –

@MichaelCokerこれは 'background-size：cover'のために重要ではありません。 MDNから：*「画像」は「コンテナの幅または高さ全体」をカバーします。* –

、私は最善のアプローチは、背景画像を使用することはないと考えています。イメージをコンテナに通常のコンテンツとして配置すると、そのコンテナはイメージのフルサイズに拡大されます。

次に、残りのコンテンツ用に別のコンテナを作成し、そのコンテンツをイメージ上に浮動させることができます。

その結果、フルサイズの画像の上に他のコンテンツが表示され、画像や縦横比の繰り返しについて心配する必要はありません。

<!DOCTYPE html> 
 
<html lang="ja"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>test</title> 
 
    <style> 
 
    
 
    #parent { border:1px solid black; } 
 
    .tests { 
 
     float:left; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div id="parent"> 
 
    <img src="http://findicons.com/files/icons/963/very_emotional_emoticons/128/128_33.png"> 
 
    <div class="tests"> 
 
     a<br> 
 
     a 
 
    </div> 
 
    </div> 
 
    <div> 
 
    <p>More content</p> 
 
    </div> 
 
</body> 
 

 

 
</html>

出典

2017-05-31 15:19:04

迅速で丁寧な対応をありがとう！私の問題はMr.Michael Cokerのコードで解決されました。しかし、あなたのコードも私の問題を解決することができます。アスペクト比について心配する必要がないので、より良いことです。 –

@西本至秀お役に立ったすべての回答を投票して、最高のものを「その」答えとしてください。がんばろう。 –

あなたは完全な背景画像を探しているなら、要素に見える画像全体で、あなたは要素が背景画像の縦横比を一致させる必要があります。さもなければ、要素はその内部のコンテンツと同じように背の高い/幅が広いでしょう。画像の大きさがある場合は、親の擬似要素にパディングやパディングを使用して画像のアスペクト比を再現すると、divは常に画像の縦横比と同じになります。内容に基づいて適合するもの

アスペクト比を再作成するには、イメージの高さを幅（この例では800/1200）で割り、100を掛けて％（66.6666666666％）を得て、それをpadding-bottomの親またはa親の擬似要素。

body { 
 
    margin: 0; 
 
} 
 

 
div { 
 
    background: url('http://weknowyourdreams.com/images/monkey/monkey-04.jpg') 0 0 no-repeat/cover; 
 
    height: 0; 
 
    padding-bottom: 66.6667%; 
 
    color: white; 
 
}

<div> 
 
    a<br> 
 
    a 
 
</div>

出典

2017-05-31 15:23:17

迅速で丁寧な対応をありがとう！私の問題はあなたのコードによって解決されました。 –

完全な背景画像ファイルを表示する方法

答えて

関連する問題