IT課程 CSS基礎 023_圖片、背景

圖片

圖片是網頁中非常重要的媒體類型，恰到好處的使用圖片可以使網頁多彩生動，不再局限冷冰冰的文字。

圖片佈局

img 元素默認為行內元素，並且默認有 5px 邊距。通過設置塊級元素，可使一行只顯示一張圖片。通過設置行內元素，可使一行顯示多張圖片。塊級元素佈局位置時使用 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 中，背景是網頁設計中常用的樣式之一，用於設置元素的背景樣式。

背景顏色

通過 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
    .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 屬性設置背景圖片的起始位置，可以使用像素值、百分比，也可以使用關鍵字。

可用任何長度單位，第二個位置(即Y軸方向)如果不聲明，默認是50%(兩個位置都不設置的話默認0% 0%)
位置關鍵字（left/right/top/bottom/center），可單雙使用（第二個關鍵字如果不聲明默認是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
}

圖片

圖片佈局

圖片透明

圖片圓角

圖片陰影

背景

背景顏色

背景圖片

背景重複（平鋪）

背景尺寸（大小）

背景位置

背景附著（固定）

背景簡寫

評論