ホームページ >ウェブフロントエンド >CSSチュートリアル >背景属性の使い方
背景属性の使い方
- 青灯夜游オリジナル
- 2019-02-18 11:21:277003ブラウズ
背景プロパティは、CSS の略語プロパティです。背景色、背景画像、画像の位置、サイズ、配置領域、描画領域、背景画像の繰り返し方法、およびまたは、ページの残りの部分がスクロールすると、背景画像が固定されます。
#CSS 背景属性
関数: 背景の略語属性すべての背景プロパティを 1 つのステートメントで設定します。
基本構文:
background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment;
パラメータ:
background-color: 使用する背景色を指定します。 background-image: 使用する 1 つ以上の背景画像を指定します。 background-position: 背景画像の位置を設定します。 background-size: 背景画像のサイズを指定します。 background-repeat: 背景画像を繰り返す方法を指定します。 background-origin: 背景画像の配置範囲を指定します。 background-clip 背景画像の描画領域を指定します。 background-attachment: 背景画像を固定するか、ページの残りの部分と一緒にスクロールするかを設定します。注: IE8 以前のブラウザは、1 つの要素に対する複数の背景画像をサポートしていません。
注: 上記の値のいずれかが欠落していても問題ありません。たとえば、設定できるのは背景画像、background: url('smiley.gif') だけです。 ) no-repeat;
CSS 背景属性の使用例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<meta charset="utf-8">
<style>
body
{
background: #00ff00 url('https://img.php.cn/upload/article/000/000/024/5c6a208c1ad5b114.gif') no-repeat fixed center;
}
</style>
</head>
<body>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
</body>
</html>レンダリング:
https://www.html.cn/book/css/properties/background/background.htm
以上が背景属性の使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。