Day 20 CSS色彩屬性＆背景屬性

2024 iThome 鐵人賽

DAY 20

佛心分享-IT 人自學之術

新手踏入網頁前端的世界系列第 20 篇

16th鐵人賽

zhiz

2024-09-24 22:35:16

36 瀏覽

分享至

今天介紹CSS色彩屬性

在前面有介紹過HTML的16種基本色系與其對應的RGB，今天將更深入探討色彩屬性值～

color設定文字顏色，如：顏色名稱(如：yellow 、pink)、rgb (紅、綠、藍)、rgba (紅、綠、藍、透明度)、hsl (色相、飽和度、亮度) 、hsla (色相、飽和度、亮度、透明度)。
opacity設定文字和圖片的不透明度，寫入屬性值為0～1 (數值越高則越不透明)。

實作範例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>顏色透明度＆不透明度</title>
</head>
<body>
    <h3 style="color: rgba(39, 106, 39, 0.8);">原圖</h3>
    <img src="art.jpg" width="200">
    <h3 style="color: hsla(226, 59%, 70%, 0.7);">圖片不透明度0.3</h3>
    <img src="art.jpg" width="200"  style="opacity:0.3;">
    
</body>
</html>

接下來介紹CSS背景屬性

background-color 設定背景顏色，也可以用於HTML標籤的背景顏色。
background-image 設定背景圖片，寫入url("圖片路徑")。
background-repeat 設定背景圖片重複排列方式，以下介紹其屬性值：
repeat (重複圖片)、no-repeat(不重覆圖片)、repeat-x (於水平軸重複圖片)、repeat-y (於垂直軸重複圖片)、space (隔著空隙重複圖片)、round(重複圖片依照網頁大小，將圖片拉伸填補空隙)。

實作範例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景圖片重複排列方式</title>
</head>
<body style="background-image: url(apple.png); background-repeat: space;">
    <h2 style="text-align: center;">紅色蘋果</h2>
    
</body>
</html>

background-position 設定背景圖片的起始位置，寫入x軸座標(公分或方向)、y軸座標(公分或方向)。
background-attachment設定背景圖片隨著頁面捲動，寫入fixed代表圖片會固定在畫面原位，不會隨著頁面內容捲動而消失。
background-size 設定背景圖片的大小(px)。
background-clip 設定背景圖片的延展，如：border-box (預設值，圖片延展到邊框以內)、padding-box (圖片延展到邊框下)。

前面介紹了許多背景屬性，若覺得逐條設定很麻煩，可以利用下面這個方式來快速設定。