ホームページ > 記事 > ウェブフロントエンド > HTML および CSS の背景関連の属性
HTML および CSS の背景関連の属性
- php中世界最好的语言オリジナル
- 2018-03-13 11:46:221807ブラウズ
今回は HTML と CSS の背景関連属性についてご紹介します。 HTML と CSS で背景関連属性を使用する際の注意点について、実際の事例を見てみましょう。
1. 背景サイズ属性
1. 背景サイズ属性とは
背景サイズ属性は、背景画像のサイズを設定するために特別に使用されます
1.具体像素 >> background-size:200px 100px; 2.百分比 >> background-size:100% 80%; 3.宽度等比拉伸 >> background-size:auto 100px; 4.高度等比拉伸 >> background-size:100px auto; 5.cover >> background-size:cover;5.1 画像を比例的に拡大する必要があることをシステムに伝えます5.2 幅 883bce56ba091867d8ce9861e5ebd697 高さが両方とも満たされるまで画像を拡大する必要があることをシステムに伝えます。要素6. contains >>background-size:contain;6.1 画像を比例的に拡大する必要があることをシステムに通知します6.2 画像を幅 5140377289afdeff196f41b2d287ceb0 高さが要素で埋められます (3499910bf9dac5ae3c52d5ede7383485 は片側のみが完全に埋められることを保証します) 背景画像配置領域属性3499910bf9dac5ae3c52d5ede7383485
背景-origin
5db79b134e9f6b82c0b36e0489ee08ed: デフォルトで背景画像がどの領域から表示されるかをシステムに指示します。 以下はパディング領域から表示されます。1.<a>padding-box</a>:默认值 >>background-origin: padding-box; 告诉系统背景图片从什么区域开始显示,默认情况下就是从padding区域开始显示; 2.<a>border-box</a> >> background-origin:border-box; 从border位置开始 3.<a>content-box</a> >> background-origin:content-box;从content位置开始
<html lang="en"> <head> <meta charset="UTF-8"> <title>113-背景图片定位区域属性</title> <style> *{ margin: 0; padding: 0; } ul li{ list-style: none; float: left; width: 100px; height: 100px; text-align: center; line-height: 100px; border: 20px dashed #000; padding: 50px; margin-left: 20px; background: url("images/dog.jpg") no-repeat; } ul li:nth-child(2){ /* 告诉系统背景图片从什么区域开始显示, 默认情况下就是从padding区域开始显示 */ background-origin: padding-box; } ul li:nth-child(3){ background-origin:border-box; } ul li:nth-child(4){ background-origin:content-box; } </style> </head> <body> <ul> <li>默认</li> <li>padding</li> <li>border</li> <li>content</li> </ul> </body> </html> 背景画像配置領域属性
3背景描画領域属性
<a>background-clip:xxx;</a>背景绘制区域属性是专门用于指定从哪个区域开始绘制背景的, 默认情况下会从border区域开始绘制背景
<html lang="en"> <head> <meta charset="UTF-8"> <title>114-背景绘制区域属性</title> <style> *{ margin: 0; padding: 0; } ul li{ list-style: none; float: left; width: 100px; height: 100px; text-align: center; line-height: 100px; border: 20px dashed #000; padding: 50px; margin-left: 20px; background: red url("images/dog.jpg") no-repeat; } ul li:nth-child(2){ /* 背景绘制区域属性是专门用于指定从哪个区域开始绘制背景的, 默认情况下会从border区域开始绘制背景 */ background-clip: padding-box; } ul li:nth-child(3){ background-clip: border-box; } ul li:nth-child(4){ background-clip: content-box; } </style> </head> <body> <ul> <li>默认</li> <li>padding</li> <li>border</li> <li>content</li> </ul> </body> </html> 背景描画領域属性 (赤色が描画領域)
4. 複数の背景画像
複数の背景画像
four .複数の背景画像の連絡先
3499910bf9dac5ae3c52d5ede7383485先添加的背景图片会盖住后添加的背景图片5db79b134e9f6b82c0b36e0489ee08ed
9fd01892b579bba0c343404bcccd70fb 93f0f5c25f18dab9d176bd4f6de5d30e a80eb7cbb6fff8b0ff70bae37074b813 b2386ffb911b14667cb8f0f91ea547a7116-多重背景图片-练习6e916e0f7d1e588d4f442bf645aedb2f c9ccee2e6ea535a969eb3f532ad9fe89 *{ margin: 0; padding: 0; } p{ width: 600px; height: 190px; border: 1px solid #000; margin: 100px auto; background-image: url("images/bg-plane.png"),url("images/bg-sun.png"), url(images/bg-clouds.png); background-repeat: no-repeat, no-repeat, no-repeat; background-size: 50px 50px, 50px 50px, auto auto; background-position: 50px 150px, 400px 50px, 0px 0px; animation: move 10s linear 0s infinite normal; } @keyframes move { from{ background-position: 50px 150px, 400px 50px, 0px 0px; } to{ background-position: 500px -150px, 400px 50px, -600px 0px; } } 531ac245ce3e4fe3d50054a55f265927 9c3bca370b5104690d9ef395f2c5f8d1 6c04bd5ca3fcae76e30b72ad730ca86d e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3 36cc49f0c466276486e50c850b7e4956 73a6ac4ed44ffec12cee46588e518a5e この記事の事例を読んだ後は、この方法を習得したと思います。情報については、PHP 中国語 Web サイトの他の関連記事にも注目してください。 推奨読書:
HTMLとCSSの2D変換モジュール
以上がHTML および CSS の背景関連の属性の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTMLとCSSの3D変換モジュール次の記事：HTMLとCSSの3D変換モジュール