ホームページ > 記事 > ウェブフロントエンド > CSS+htmlで背景画像の塗りつぶしを実装する方法の詳細な説明
CSS+htmlで背景画像の塗りつぶしを実装する方法の詳細な説明
- 黄舟オリジナル
- 2017-07-22 09:16:525459ブラウズ
はじめに:
今日は個人的なウェルカムインターフェイスを書きたくて、フロントエンドを再度作業しましたが、本当に急いでいた
美しいビューのために、もっと費やしてください時間、また午前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('bg.jpg');
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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。