理解背景圖片與圖片
Understanding "background-size"
background 是 background 系列屬性的縮寫。
background 系列屬性包括 background-image、background-color、background-size 等。
background 系列屬性使用範例
.my-class {
/* 使用圖片當作背景 */
background-image: url("route");
/* 將背景尺寸設定為 cover */
background-size: cover;
/* 將背景重複屬性設定為不重複 */
background-repeat: no-repeat;
}
MDN 文件
Working with "background-position"
套用 background-position 屬性可調整背景的相對位置。
background-position 使用範例
/* Keyword values */
background-position: top;
/* <percentage> values */
background-position: 25% 75%;
/* <length> values */
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;
/* Multiple images */
background-position: 0 0, center;
/* 更多範例見 MDN 文件 */
MDN 文件
Styling Images
如下範例所示，a 標籤搭配 img 標籤，可形成帶有連結的圖片。
<a href="index.html" class="img-container">
<img src="images/icon.png" alt="site icon" />
</a>
但由於 a 標籤與 img 標籤 都是行內元素，
所以上述方法形成的連結圖片通常需調整 CSS 以達到合適的尺寸。範例如下。
.img-container {
/* 套用行內區塊元素設定，以利設定容器高度 */
display: inline-block;
/* 設定合適的容器高度 */
height: 22px;
}
.img-container img {
/* 使圖形高度符合容器高度 */
height: 100%;
}
Understanding Linear Gradients
background-image 的值可藉由 linear-gradient() 函式實現線性漸層。
線性漸層範例
background-image: linear-gradient(30deg, red, blue);
/* 更多範例、詳細解說見 MDN 文件 */
MDN 文件
Applying Radial Gradients
background-image 的值可藉由 radial-gradient() 函式實現放射漸層。
放射漸層範例
background-image: radial-gradient(
ellipse farthest-corner at 20% 50%,
red,
blue,
green
);
/* 更多範例、詳細解說見 MDN 文件 */
MDN 文件
Stacking Multiple Backgrounds
background 可設定兩個以上值，每個值以逗號區隔。
堆疊背景範例
#my-id {
background: linear-gradient(
to top,
rgba(223, 214, 177, 0.6),
10%,
transparent
),
url("images/my-picture.jpg") left 10% bottom 20% / cover no-repeat
border-box, #ff1b68;
}
以上範例設定了三個背景。最後一個背景的值為 #ff1b68，用意是當第二個值的圖檔無法使用時，
確保背景不至於留白，而是以純色色塊當作備案；第一個值則是用以產生若有似無的漸層，類似濾鏡效果。
Understanding Filters
使用 filter 屬性可針對背景套用濾鏡。
filter 使用範例
#my-div {
background: url("../images/img.jpg") center/cover;
filter: grayscale(40%);
}
/* 更多範例、詳細解說見 MDN 文件 */