ホームページ > 記事 > ウェブフロントエンド > CSSで画像の背景を設定する方法
CSSで画像の背景を設定する方法
- 青灯夜游オリジナル
- 2021-04-20 16:42:0932479ブラウズ
CSS で画像の背景を設定する方法: 1.background-image 属性、構文 "background-image:url('image address');"; を使用します 2.background 属性、構文を使用します"background:url(' 地図のアドレス');"。
このチュートリアルの動作環境: 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('img/1.jpg');
}
</style>
</head>
<body>
</body>
</html>レンダリング:
#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;以下に示す説明:
例:
<!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で画像の背景を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。