iT邦幫忙

2024 iThome 鐵人賽

DAY 20
0
佛心分享-IT 人自學之術

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

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

  • 分享至 

  • xImage
  •  

今天介紹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>

https://ithelp.ithome.com.tw/upload/images/20240924/20169120ubPEBpOzYR.png

接下來介紹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>

https://ithelp.ithome.com.tw/upload/images/20240924/20169120btbAL6kBFP.png

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

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

  • background功用是不用逐一設定背景屬性,不同屬性值用空格隔開。

上一篇
Day19 CSS項目清單屬性&實作範例
下一篇
Day 21 CSS區塊相關屬性(上)
系列文
新手踏入網頁前端的世界30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言