ITコース CSS基礎 023_画像、背景

画像

画像はWebページにおいて非常に重要なメディアタイプです。適切に画像を使用することで、Webページをカラフルで生き生きとしたものにし、冷たいテキストだけに限定されなくなります。

画像レイアウト

img要素はデフォルトでインライン要素であり、デフォルトで5pxのマージンがあります。ブロックレベル要素に設定することで、1行に1つの画像のみを表示できます。インライン要素に設定することで、1行に複数の画像を表示できます。ブロックレベル要素のレイアウト位置にはmarginプロパティを使用し、インライン要素のレイアウト位置にはtext-alignプロパティを使用します。

例：

1
<img src="zhaojian1.jpg" alt="" >
2
<img src="zhaojian1.jpg" alt="" >
3
<img src="zhaojian1.jpg" alt="" >
4
<img style="display: block;" src="zhaojian1.jpg" alt="" >
5
<img style="display: block;" src="zhaojian1.jpg" alt="" >
6
<img style="display: block;margin: 0 auto;" src="zhaojian1.jpg" alt="" >

効果：例の効果

画像の透明度

CSSでは、opacityプロパティを使用して要素（画像を含む）の透明度を設定できます。このプロパティは0（完全に透明）から1（完全に不透明）の範囲の値を受け入れます。

画像の背景のみを透明にしてコンテンツに影響を与えたくない場合は、RGBAカラー値を使用できます。

例：

1
<img src="zhaojian1.jpg" alt="" >
2
<img style="opacity: 0.5;" src="zhaojian1.jpg" alt="" >

効果：例の効果

画像の角丸

CSSでは、border-radiusプロパティを使用して画像に角丸を追加できます。このプロパティは要素の境界線の角の曲率を設定するために使用されます。

例：

1
<img style="border-radius: 10px;" src="zhaojian1.jpg" alt="" >
2
<!-- 角丸の半径を設定、必要に応じて調整可能 -->
3
<img style="border-radius: 20px 10px;" src="zhaojian1.jpg" alt="" >
4
<!-- 水平半径20px、垂直半径10px -->
5
<img style="border-radius: 10px 20px 15px 5px;" src="zhaojian1.jpg" alt="" >
6
<!-- 左上10px、右上20px、右下15px、左下5px -->

効果：例の効果

画像の影

CSSでは、box-shadowプロパティを使用して画像に影効果を追加できます。このプロパティでは、影の色、ぼかし半径、オフセットなどの投影効果を追加できます。

例：

1
<img style="box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);" src="zhaojian1.jpg" alt="" >
2
<br><br>
3
<!-- 水平オフセット5px、垂直オフセット5px、ぼかし半径10px、影の色は半透明の黒 -->
4
<img style="box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 255, 255, 0.7) inset;" src="zhaojian1.jpg" alt="" >
5
<!-- 外側と内側の影効果、insetキーワードを使用して内側の影を指定 -->

効果：例の効果

背景

CSSでは、背景はWebデザインでよく使用されるスタイルの1つで、要素の背景スタイルを設定するために使用されます。

背景色

background-colorプロパティを通じて要素の背景色を設定します。

例：

1
    .example1 {
2
        background-color: #f0f0f0;
3
        width: 500px;
4
        height: 500px;
5
    }

1
    <div class="example1"></div>

効果：

例の効果

背景画像

background-imageプロパティを通じて要素の背景画像を設定します。画像の相対パス、絶対パス、またはURLを使用できます。

例：

1
    .example1 {
2
        background-image: url('zhaojian.jpg');
3
        width: 500px;
4
        height: 500px;
5
    }

1
    <div class="example1"></div>

効果：例の効果

背景の繰り返し（タイリング）

background-repeatプロパティを通じて背景画像の繰り返し方法を設定します。水平方向、垂直方向、両方向、または繰り返しなしにできます。

repeat：画像が水平方向と垂直方向の両方で繰り返される（デフォルト）
repeat-x：画像が水平方向に繰り返される
repeat-y：画像が垂直方向に繰り返される
no-repeat：画像は1回だけタイリングされる

例：

1
    .base {
2
        background-image: url('zhaojian1.jpg');
3
        width: 200px;
4
        height: 200px;
5
    }
6
    .example1 {
7
        background-repeat: no-repeat;
8
    }
9
    .example2 {
10
        background-repeat: repeat-x;
11
    }
12
    .example3 {
13
        background-repeat: repeat-y;
14
    }

1
    繰り返しなし
2
    <div class="base example1"></div>
3
    水平方向に繰り返し
4
    <div class="base example2"></div>
5
    垂直方向に繰り返し
6
    <div class="base example3"></div>

効果：例の効果

背景サイズ

background-sizeプロパティを通じて背景画像のサイズを設定します。具体的なピクセル値、パーセンテージ、またはcoverやcontainなどのキーワードを使用できます。

デフォルト：元の背景画像の完全な表示。
auto：画像の比率でスケーリングして背景とし、画像は繰り返しタイリングされて表示される
cover：画像を領域全体をカバーするまで拡張し、比率を維持。画像が完全に表示されない場合があり、部分的なオーバーフローが発生する可能性がある。
contain：画像をアスペクト比を維持しながらできるだけスケーリングし、高さまたは幅が背景領域全体に収まるようにする。スケーリングにより背景に部分的な空白領域が生じる可能性があり、その場合コンテナの空白領域にはbackground-colorで設定された背景色が表示される。

例：

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
    }
5
    .example1 {
6
        background-image: url('zhaojian.jpg');
7
        background-size: auto;
8
    }
9
    .example2 {
10
        background-image: url('zhaojian2.jpg');
11
        background-size: cover;
12
    }
13
    .example3 {
14
        background-image: url('zhaojian2.jpg');
15
        background-size: contain;
16
    }
17
    .example4 {
18
        background-image: url('zhaojian2.jpg');
19
        background-size: 50% 100%;
20
    }

1
    <div class="base example1"></div>
2
    <br>
3
    <div class="base example2"></div>
4
    <br>
5
    <div class="base example3"></div>
6
    <br>
7
    <div class="base example4"></div>

効果：例の効果

背景位置

background-positionプロパティを通じて背景画像の開始位置を設定します。ピクセル値、パーセンテージ、またはキーワードを使用できます。

任意の長さ単位を使用できます。2番目の位置（Y軸方向）が宣言されていない場合、デフォルトは50%です（両方の位置が設定されていない場合、デフォルトは0% 0%）
位置キーワード（left/right/top/bottom/center）、単独または組み合わせて使用可能（2番目のキーワードが宣言されていない場合、デフォルトはcenter）
混合使用

例：

1
    .base {
2
        background-image: url('zhaojian1.jpg');
3
        background-repeat: no-repeat;
4
        background-color: #d6d7d8;
5
        width: 200px;
6
        height: 200px;
7
    }
8
    .example1 {
9
        background-position: center top;
10
    }
11
    .example2 {
12
        background-position: 50% 50%;
13
    }
14
    .example3 {
15
        background-position: 50% bottom;
16
    }

1
    <div class="base example1"></div>
2
    <br>
3
    <div class="base example2"></div>
4
    <br>
5
    <div class="base example3"></div>

効果：例の効果

背景の固定

background-attachmentプロパティを通じて背景画像が固定されるか、コンテンツと一緒にスクロールするかを設定します。

scroll：背景画像がページスクロールと一緒に移動（デフォルト）
fixed：背景画像がページスクロールと一緒に移動しない
local：背景画像が要素のコンテンツのスクロールと一緒にスクロール。

例：

1
.example1 {
2
  background-attachment: scroll;
3
}
4
.example2 {
5
  background-attachment: fixed;
6
}
7
.example3 {
8
  background-attachment: local;
9
}

効果：

背景の省略記法

backgroundプロパティは省略記法で書くことができ、個々のサブプロパティを宣言するよりもはるかに簡潔で、コード量を減らすことができます。backgroundのサブプロパティは多数あるため、サブプロパティの省略記法の順序をどのように配置するかも課題です。CSS2はサブプロパティの省略記法の順序規則を推奨しています：

例：

1
.example1{
2
  background: color image repeat attachment position/size;
3
}
4

5
.example2{
6
  background: #ffffff url('img_tree.png') no-repeat right top;
7
}

画像

画像レイアウト

画像の透明度

画像の角丸

画像の影

背景

背景色

背景画像

背景の繰り返し（タイリング）

背景サイズ

背景位置

背景の固定

背景の省略記法

コメント