はじめに:

今日は個人的なウェルカムインターフェイスを書きたくて、フロントエンドを再度作業しましたが、本当に急いでいた

美しいビューのために、もっと費やしてください時間、また午前3時です0.0

CSSは単一の背景画像の塗りつぶしを実現します

実装方法1:

body要素のbackground-image属性を直接使用、複数のブラウザ互換性があり、基本的に要件を満たしています

背景色を追加: #22C3AA; 画像をロードする前に色を表示します

バグ: ページが小さすぎると下部に隙間ができます

詳細な属性 w3school の背景属性

<span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">    
<html>    
<head>    
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    
<title>hello world</title>    

<style type="text/css">
body {
	margin: 0;
	background-image: url(&#39;bg.jpg&#39;);  
	background-repeat:no-repeat;
        background-position:0% 0%;
  	background-size:cover;
	background-color: #22C3AA;
}
</style>

</head>    
<body>
</body>    
</html> </span>

ログイン後にコピー

実装方法 2:

p を使用すると、画像はブラウザのサイズに適応でき、本文のバグは発生しません

BUG: IE11互換性がありません。下に緑色の線 (本体の背景色) が表示され、非常に見苦しいです

参照: HTML で背景画像をブラウザのサイズに合わせてください

<span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">    
<html>    
<head>    
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    
<title>hello world</title>    

<style type="text/css">
body {
	margin: 0;	
	background-color: #22C3AA;
}
</style>

</head>    
<body>
<!--
<p id="Layer1" style="position:absolute; width:100%; height:100%; background-color: #22C3AA; z-index:-1" >    
<img src="3-bg.jpg" height="100%" width="100%"/>    
</p>
-->
</body>    
</html> </span>

ログイン後にコピー

以上がCSS+htmlで背景画像の塗りつぶしを実装する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。