ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS 背景繰り返しプロパティ_html/css_WEB-ITnose
CSS 背景繰り返しプロパティ_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:33:561403ブラウズ
background-repeat 属性の定義と使用法:
オブジェクトの背景画像がどのようにレイアウトされ塗りつぶされるかを設定または取得します。
background-image 属性を最初に指定する必要があります。
2 つのパラメータを指定できるようにします。2 つのパラメータをすべて指定すると、最初のパラメータは横向きに使用され、2 番目のパラメータは縦向きに使用されます。
パラメータが 1 つだけ指定されている場合、それは風景とポートレートに使用されます。特殊な値repeat-xとrepeat-yを除き、repeat-xはrepeat no-repeatと同等、repeat-yはno-repeatrepeatと同等であるため、repeat-xとrepeat-yは同等です。 2 つのパラメータ値を指定します。
対応するスクリプト機能はbackgroundRepeatです。
構文構造:
background-repeat：repeat-x | repeat-y | [repeat | space | round | no-repeat
値:
repeat: 背景画像は水平方向と垂直方向に並べて表示されます (デフォルト値)。
repeat-x: 背景画像が水平に並べて表示されます。
repeat-y: 背景画像が垂直方向に並べて表示されます。
no-repeat: 背景画像はタイル化されません。
round: 背景画像はコンテナ全体に収まるまで自動的に拡大縮小されます。 (CSS3)
スペース: 背景画像が同じ間隔でタイル状に並べられ、コンテナ全体または特定の方向を埋めます。 (CSS3)
ブラウザのサポート:
1. IE8 以前のブラウザでは、background-repeat の 2 つのパラメータ値の定義はサポートされていません。
2. Firefox4.0-8.0 は、background-repeat の 2 つのパラメータ値の定義をサポートしていません。CSS3 の新しいパラメータ値round | をサポートしていません。
3.Safari5.1 は CSS3 の新しいパラメータ値round | spaceを受け入れましたが、まだサポートを実装していません。 4. Chrome 13.0 ～ 16.0 は、新しい CSS3 パラメータ値の丸スペースを受け入れましたが、サポートはまだ実装されていません。
継承:
継承はありません。
コード例:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.mytest { height:200px; height:200px; background-image:url(mytest/div+css/border.jpg); background-repeat:repeat-x;}</style></head><body><div class="mytest">欢迎来到蚂蚁部落</div></body></html> 元のアドレスは次のとおりです: CSS 背景繰り返し属性の章。
その他の CSS 記事については、http://www.softwhy.com/divcss/
を参照してください。