ホームページ  >  記事  >  ウェブフロントエンド  >  HTMLに背景画像を追加して、ページ全体に画像タイルを表示するにはどうすればよいですか? (コード例)

HTMLに背景画像を追加して、ページ全体に画像タイルを表示するにはどうすればよいですか? (コード例)

藏色散人
藏色散人オリジナル
2018-08-11 16:47:26151529ブラウズ

ウェブサイトのページによっては、見栄えの良い背景画像を追加するとより目を引くものもありますが、ウェブページの背景画像はどのように設定すればよいでしょうか?また、通常、HTML 背景画像のタイル表示効果を表示するために必要です。 html/css の知識が少しある友人にとっては、これは難しくないはずです。そこで、この記事は主に初心者の友達に向けて、HTML背景画像の追加方法と使い方を詳しく紹介します。ご参考に。

1. HTML 背景画像の水平タイリングのコード例:

<style type="text/css">
    body{
        font-size:12px;
        font-family:"宋体";
        background-image:url(2.png);
        background-repeat:repeat-x;
        COLOR: #0C2B30;
    }
</style>

効果は次のとおりです:

HTMLに背景画像を追加して、ページ全体に画像タイルを表示するにはどうすればよいですか? (コード例)

2. HTML 背景画像の垂直タイリングのコード例:

    body{
        font-size:12px;
        font-family:"宋体";
        background-image:url(2.png);
        background-repeat:repeat-x;
        COLOR: #0C2B30;
    }

以下に示すとおりです:

HTMLに背景画像を追加して、ページ全体に画像タイルを表示するにはどうすればよいですか? (コード例)

3. HTML 画像の全画面コード例:

html,body{
    width: 100%;
    height: 100%;
}
.mui-content{
    background: url(2.png) bottom center no-repeat #efeff4 ;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
}

効果は次のとおりです:

HTMLに背景画像を追加して、ページ全体に画像タイルを表示するにはどうすればよいですか? (コード例)

以上は、HTML に背景を設定する方法に関する関連知識をまとめたものです。画像、HTML背景タイルなど。困っている友達の助けになれば幸いです。

注:

background 省略表現プロパティは、1 つのステートメントですべての背景プロパティを設定します。

background-size 属性は、背景画像のサイズを指定します。

background-repeat プロパティは、背景画像を繰り返すかどうか、および繰り返す方法を設定します。デフォルトの背景画像は水平方向と垂直方向に繰り返されます。

background-image 属性は、要素の背景画像を設定します。

要素の背景は、パディングと境界線を含む要素のサイズ全体を占めますが、マージンは含みません。デフォルトでは、背景画像は要素の左上隅に配置され、水平方向と垂直方向に繰り返されます。


以上がHTMLに背景画像を追加して、ページ全体に画像タイルを表示するにはどうすればよいですか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。