1: 背景色 背景色を設定します
2:background-image 背景画像を設定します
- 構文: 背景画像:url (相対パス);
- 要素の背景色と背景画像の両方を同時に指定できます。
この背景色は背景画像の背景色として使用されます。
- 要素内の画像の位置
背景画像が要素のサイズより小さい場合、デフォルトで背景画像は要素を埋めるように並べて表示されます。
背景画像が要素より大きい場合、デフォルトで画像の左上隅が表示されます。
背景画像が要素と同じサイズの場合、背景画像全体が表示されます。
3:background-repeat は、背景画像のリピート モードを設定するために使用されます。
オプションの値:
繰り返し、デフォルト値、背景画像が両方向に繰り返されます (タイリング)
no-repeat 、背景画像は繰り返されず、そのままの大きさで表示されます。
repeat-x、背景画像が水平方向に繰り返されます。
repeat-y、背景画像が垂直方向に繰り返されます
4:background-position 要素内の背景画像の位置を調整できます
背景画像はデフォルトで要素の左上隅に表示されます
オプションの値:
このプロパティは右上左下中央の2つの値を使用できます
背景画像の位置を指定するには
左上 左上
右下 右下
値が 1 つだけ指定された場合、2 番目の値はデフォルトで中央に設定されます。
2 つのオフセットを直接指定することもできます。
最初の値は水平オフセットです
- 正の値を指定すると、画像は指定されたピクセルだけ右にシフトされます。
- 負の値を指定すると、画像は指定されたピクセルだけ左にシフトされます。
2 番目は垂直オフセットです
- 正の値を指定すると、画像は指定されたピクセルだけ下にシフトされます。
- 負の値を指定すると、指定したピクセルだけ画像が上にシフトされます
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
.box1 {
width: 300px;
height: 300px;
margin: 0 auto;
/* 需求1:添加背景色 */
background-color: blueviolet;
/* 需求2:添加背景图片 */
background-image: url(./img/gaitubao_小图_png.png);
/* 需求3:虽然图小，但图片我只要一张*/
background-repeat: no-repeat;
/* 需求4:调整背景图片在元素中的位置 */
background-position:-50px -50px;
}
</style>
</head>
<body>
<div class="box1">
嗣专一冇纯即，助也。jwdjdjfasadf
</div>
</body>
</html>5.背景クリップ
背景の範囲を設定する
オプションの値:
border-box デフォルト値、背景色は境界線の下に表示されます
パディングボックスの背景は境界線には表示されず、コンテンツ領域とパディングにのみ表示されます。
コンテンツボックスの背景はコンテンツ領域にのみ表示されます
6:背景原点
オフセットと組み合わせて使用される、背景画像のオフセット計算の原点を設定します。
パディングボックスは内側の距離から計算されます。デフォルト値
コンテンツ ボックスの背景画像のオフセットは、コンテンツ領域から計算されます。
border-box は境界線からのオフセットを計算します
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box1 {
height: 300px;
width: 300px;
padding: 20px;
border: 20px red double;
margin: 0 auto;
/*设置一个背景颜色*/
background-color: #bfa;
background-clip: content-box;
background-image: url(./img/gaitubao_小图_png.png);
background-repeat: no-repeat;
background-position: 100px 100px;
background-origin: border-box;
}
.box2{
width: 100%;
height: 100%;
background-color: green;
}
</style>
</head>
<body>
<div class="box1">
<!-- <div class="box2"></div> -->
</div>
</body>
</html>7:background-size 画像のサイズを設定します
パラメータ:
最初の値: 幅
2 番目の値: 高さ
1 つだけが書き込まれた場合、2 番目の値はデフォルトで auto になります。
カバー画像の比率は変更されず、ボックス要素が覆われます
含む 画像の比率は変更されず、画像要素が完全に表示されます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box1 {
height: 300px;
width: 300px;
background-color: green;
background-image: url(./img/大图2.webp);
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
</div>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
.box1 {
height: 300px;
width: 300px;
/*设置一个背景颜色*/
/*background-color: #bfa;*/
/*设置一个背景图片*/
/*background-image: url(img/3.png);*/
/*设置背景不重复*/
/*background-repeat: no-repeat;*/
/*设置背景图片的位置*/
/*background-position: center center;*/
/* 设置图片大小 */
/* background-size:cover ; */
/* 设置图片偏移的原点 */
/* background-origin: padding-box; */
/* 设置背景的范围 */
/* background-clip: padding-box; */
/*
background
- 通过该属性可以同时设置所有背景相关的样式
- 没有顺序的要求，谁在前谁在后都行
也没有数量的要求，不写的样式就使用默认值
-background-size要写在background-position后面
*/
background: #bfa url("./img/小图2.webp") center/200px no-repeat;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>2. スプライト画像
1. 画像統合技術（CSS-Sprite）
アドバンテージ：
1 複数の画像を 1 つの画像に統合するには、ブラウザは 1 つのリクエストを送信するだけで済み、複数の画像を同時にロードできます。
アクセス効率を向上させ、ユーザーエクスペリエンスを向上させます。
2 複数の画像を 1 つの画像に統合し、画像の合計サイズを削減し、リクエストの速度を上げ、ユーザー エクスペリエンスを向上させます。
2. スプライトの使用手順
1：まず使用するアイコンを決める
2: アイコンのサイズを測る
3: 測定に基づいて要素を作成する
4: スプライト画像を要素の背景として設定する
5: 正しい画像を表示するためにオフセットを設定します。
チューブの中のヒョウ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
a {
display: block;
width: 250px;
height: 78px;
background-color: pink;
background-image: url(./img/亚马逊.png);
}
a:hover{
background-position: 0 -80px;
}
a:active{
background-position: 0 -660px;
}
</style>
</head>
<body>
<!-- 创建一个超链接 -->
<a class="btn" href="#"></a>
</body>
</html>3. グラデーションカラー
グラデーション: いくつかの複雑な背景色をグラデーションで設定でき、ある色から別の色に遷移する効果を実現できます。
グラデーションは背景画像で設定された画像です
オプションの値
1: 線形グラデーション (方向、色 1、色 2) ['ɡreidiənt]
線形グラデーション。色が直線に沿って変化します。
パラメータ 1: 方向を示します (オプションの値、書かれていない場合、デフォルトは下です)
(1)左へ、右へ、下へ、上へ
(2) xxxdeg は角度、度を意味し、より柔軟になります。
(3)ターンとは円を5ターンという意味です
パラメータ 2: カラー 1
パラメータ 3: カラー 2
知らせ：
複数の色を書くことができます。デフォルトでは色は均等に分割されます
グラデーションの分布を手動で指定することもできます
背景画像:線形グラデーション(赤50ピクセル、黄色) ;
色の直後に比率が続きます
2:繰り返し線形グラデーション()
タイル状に並べることができる線形グラデーション
背景画像: 繰り返し線形グラデーション(黄色 0px、赤 50px);
パラメータはlinear-gradientと同じです
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box1 {
width: 200px;
height: 200px;
/* background-color: red; */
/* background-image: linear-gradient(red 20px,yellow); */
background-image: repeating-linear-gradient(red 10px,yellow 20px);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>4. 放射状勾配
1:radial-gradient() ['reidiəl] ['ɡreidiənt]
子午線勾配（放射線の影響）
デフォルトでは、円の中心は要素の形状に基づいて計算されます。
四角い丸い
長方形の楕円形
パラメータ 1: 円の中心の形状
(1) 円、楕円、
(2) 位置 ==> ピクセル 1 ピクセル 2 0px 0px のサイズを設定します
背景画像：radial-gradient(100px 100px at 100px 0px,red, yellow);
パラメータ 2: カラー 1
パラメータ 3: カラー 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box1 {
width: 400px;
height: 200px;
/* background-image: radial-gradient(red,yellow); */
background-image: radial-gradient(100px 100px at 100px 0px,red,yellow);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>