CSSで画像の背景を設定する方法-CSSチュートリアル-php.cn

CSSで画像の背景を設定する方法

青灯夜游

リリース： 2023-01-05 16:10:09

オリジナル

32492 人が閲覧しました

CSS で画像の背景を設定する方法: 1.background-image 属性、構文 "background-image:url('image address');"; を使用します 2.background 属性、構文を使用します"background:url(' 地図のアドレス');"。

CSSで画像の背景を設定する方法

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

css では、background-image 属性または background 属性を使用して画像の背景を設定できます。

css background-image プロパティ

background-image プロパティは、要素の背景画像を設定します。

要素の背景は、パディングと境界線を含む要素の合計サイズです (マージンは含まれません)。

デフォルトでは、背景画像は要素の左上隅に配置され、垂直方向と水平方向に繰り返されます。

属性値:

url('URL') 画像を指すパス。
none デフォルト値。背景画像は表示されません。
inherit は、background-image プロパティの設定を親要素から継承することを指定します。

#例:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>css设置背景图片</title>
		<style>
			body {
				background-image: url(&#39;img/1.jpg&#39;);
			}
		</style>
	</head>

	<body>

	</body>

</html>

ログイン後にコピー

レンダリング:

CSSで画像の背景を設定する方法

##css 背景属性

#background 属性は、背景に特別に設定されるプロパティであり、1 つのステートメントですべての背景プロパティを設定できる短縮プロパティです。 (学習ビデオ共有: css ビデオチュートリアル

)

設定できる背景属性:

background-color: 設定する背景色を指定します。使用済み。

background-position: 背景画像の位置を指定します。
background-size: 背景画像のサイズを指定します。
background-repeat: 背景画像を繰り返す方法を指定します。
background-origin: 背景画像の配置領域を指定します。
background-clip: 背景の描画領域を指定します。
background-attachment: 背景画像を固定するか、ページの残りの部分と一緒にスクロールするかを指定します。
background-image: 使用する背景画像を指定します。
background-image 属性は HTML ページの背景画像属性を設定するものであることがわかります。その使用法を見てみましょう

background-image:url(1.jpg);

ログイン後にコピー

これはurl() で指定する画像のパスを指定することで、div ボックスに背景画像を設定できます。簡単そうに見えますが、注意すべき点は、背景画像を設定するボックスには十分な幅と高さが必要であることです。背景画像をディスプレイに表示できることを確認します。

上記の背景属性を 1 つずつ設定するのが面倒に思われる場合は、いくつかの属性をまとめて設定することもできます。このような CSS 背景表現を使用すると、CSS ファイルのコードを保存して最適化できます。例:

background:url(bgimg.gif) no-repeat 5px 5px;

ログイン後にコピー

以下に示す説明:

例: CSSで画像の背景を設定する方法

<!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(img/1.jpg);
                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で画像の背景を設定する方法プログラミング入門