ホームページ > 記事 > ウェブフロントエンド > CSSで背景画像のタイリングモードを設定するにはどうすればよいですか? CSSで背景画像のタイリングを設定する方法(画像と文章で詳しく解説)
CSSで背景画像のタイリングモードを設定するにはどうすればよいですか?この記事では、CSS で背景画像のタイルを設定する方法を紹介し、CSS で背景画像を水平方向にタイル状に配置するか、垂直方向にタイル状にタイル状に配置するか、またはタイル状に配置しないように設定する方法を説明します。困っている友人は参考にしていただければ幸いです。
background-image 属性を使用してページに背景画像を表示すると、画像サイズなどの理由により、背景画像が縦横に並べて表示される場合があります。その方法は以下のように表示されます。 :
しかし、場合によっては、そのような背景画像表示メソッドが必要なく、背景画像を 1 回だけ表示する (並べて表示しない) か、個別にタイルを実装したいだけです。水平方向に、垂直方向にタイルを並べます。これらのタイリングメソッドは CSS で実装できます。
では、CSS で背景画像のタイリング方法を設定するにはどうすればよいでしょうか?実は、cssのbackground-repeat属性で背景画像のタイリング方法を設定することができます。 background-repeat 属性を使用すると、次の属性値を設定することにより、背景画像を水平方向、垂直方向にタイル状に並べたり、タイル状に並べたりしないようにしたり、完全に並べたりすることができます。
繰り返し: デフォルト値。背景画像が垂直方向と水平方向に並べて表示されるように設定します。つまり、完全に並べて表示されます。
repeat-x: 背景画像を水平に並べて表示するように設定します。
repeat-y: 背景画像を縦に並べて表示するように設定します。
no-repeat: 背景画像を並べて表示しないように設定します。つまり、1 回だけ表示されます。
簡単なコード例を使用して、これらの属性値を実装する方法を理解しましょう:
1, repeat 背景画像を完全にタイル表示するように設定します
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> .demo{ width: 600px; height: 540px; margin: 50px auto; background-image: url(CSSで背景画像のタイリングモードを設定するにはどうすればよいですか? CSSで背景画像のタイリングを設定する方法(画像と文章で詳しく解説)); background-repeat:repeat; border: 1px solid #000; } </style> </head> <body> <div class="demo"></div> </body> </html>
レンダリング:
##2. no-repeat は背景画像をタイル表示しないように設定します
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> .demo{ width: 600px; height: 540px; margin: 50px auto; background-image: url(CSSで背景画像のタイリングモードを設定するにはどうすればよいですか? CSSで背景画像のタイリングを設定する方法(画像と文章で詳しく解説)); background-repeat:no-repeat; border: 1px solid #000; } </style> </head> <body> <div class="demo"></div> </body> </html>レンダリング:
repeat-x 背景画像を水平方向に並べて設定します
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> .demo{ width: 600px; height: 540px; margin: 50px auto; background-image: url(CSSで背景画像のタイリングモードを設定するにはどうすればよいですか? CSSで背景画像のタイリングを設定する方法(画像と文章で詳しく解説)); background-repeat:repeat-x; border: 1px solid #000; } </style> </head> <body> <div class="demo"></div> </body> </html>レンダリング: 4,
repeat-y 背景画像を縦方向に並べて設定します
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> .demo{ width: 600px; height: 540px; margin: 50px auto; background-image: url(CSSで背景画像のタイリングモードを設定するにはどうすればよいですか? CSSで背景画像のタイリングを設定する方法(画像と文章で詳しく解説)); background-repeat:repeat-y; border: 1px solid #000; } </style> </head> <body> <div class="demo"></div> </body> </html>レンダリング: background-repeat 属性に関しては、次の
手順 :
要約: 以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。関連チュートリアルの詳細については、 CSS ビデオ チュートリアル 、 CSS3 ビデオ チュートリアル をご覧ください。
関連する推奨事項: ##div/css グラフィック チュートリアル以上がCSSで背景画像のタイリングモードを設定するにはどうすればよいですか? CSSで背景画像のタイリングを設定する方法(画像と文章で詳しく解説)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。