ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS を使用して背景画像の繰り返し効果を実現する方法
#この記事の動作環境: Windows 7 システム、Dell G3 コンピューター、HTML5&&CSS3 バージョン。 背景画像の繰り返しエフェクト、大手サイトなどで誰もが見たことがあるかと思います。見栄えの良い背景画像の繰り返し効果により、Web ページがより美しく、コンテンツが豊富になります。この効果は、CSS の背景関連のプロパティを通じて実現できます。CSS を使用して背景画像の繰り返し効果を実現する方法: まず HTML サンプル ファイルを作成し、基本的なコードを入力します。次に、それを「background-image: url(img/154e.png);background-」を通じて実装します。 repeat:repeat;" 属性 背景画像は効果を繰り返します。
以下では、簡単なコード例を使用して、CSS で背景画像を繰り返す効果を紹介します。
コード例は次のとおりです:<!DOCTYPE> <html> <meta charset="utf-8"> <head> <title></title> <style type="text/css"> body{ background-image: url(img/154e.png); background-repeat: repeat; } </style> </head> <body> </body> </html>ここで使用する単一の画像は次のとおりです: 次に、背景画像を繰り返す効果 最終的な画像は次のとおりです (スクリーンショットの一部): ##関連属性の紹介:
#background-imageattribute
Yes 要素の背景画像を設定します。要素の背景は、パディングと境界線を含む要素のサイズ全体を占めますが、マージンは含みません。background-repeat 属性
背景画像を繰り返すかどうか、どのように繰り返すかを設定します。注: デフォルトでは、背景画像は要素の左上隅に配置され、水平方向と垂直方向に繰り返されます。
お勧めの参考文献: 「CSS チュートリアル
」この記事は、背景画像の繰り返しの効果を実現するための CSS の導入についてのものです。これも非常に簡単だと思います。それは助けを必要とする友人にとって役立ちます。
以上がCSS を使用して背景画像の繰り返し効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。