CSSに画像ファイルを導入する方法-フロントエンドQ&A-php.cn

CSSに画像ファイルを導入する方法

藏色散人

リリース： 2023-01-04 09:38:19

オリジナル

11521 人が閲覧しました

CSS に画像ファイルを導入する方法: 1. 「background-image:url (画像アドレス)」メソッドでインポート; 2. 「background:url (画像アドレス)」メソッドで画像をインポートWeb ページ上に表示します。

CSSに画像ファイルを導入する方法

このチュートリアルの動作環境: Dell G3 コンピューター、Windows 7 システム、HTML5&&CSS3 バージョン。

推奨: 「css ビデオチュートリアル」

css では画像ファイルを紹介します

CSS では、background-image を使用できます。 :url (画像アドレス) または background:url (画像アドレス) を使用して画像を紹介し、Web ページに表示します。

<div id="bgimg"></div>
#bgimg {
background: #333 url(图片路径) center center no-repeat;
}

ログイン後にコピー

最初のパラメータは、画像の下層の背景色です。2 番目のパラメータは、画像のパスです。3 番目のパラメータは、画像の上部と下部の相対位置です (他のパラメータは左と下のパラメータです)。 4 番目のパラメータは画像で、左右の相対位置 (上、下)、5 番目のパラメータは画像の繰り返しです (他のパラメータはrepeat、repeat-x、repeat-y)。

例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>背景图片设置</title>
        <style>
            .demo{
                position:fixed;
                top: 0;
                left: 0;
                width:100%;
                height:100%;
                min-width: 1000px;
                z-index:-10;
                zoom: 1;
                background-color: #fff;
                background: url(1.png);
                background-repeat: no-repeat;
                background-size: cover;
                -webkit-background-size: cover;
                -o-background-size: cover;
                background-position: center 0;
            }
        </style>
    </head>
    <body>
        <div class="demo"></div>
    </body>
</html>

ログイン後にコピー

レンダリング:

CSSに画像ファイルを導入する方法