Day 19 CSS背景套用

14th鐵人賽

田田

團隊直接在你主堡跳舞

2022-10-04 09:05:15

516 瀏覽

分享至

昨天已經說明CSS製作卡片的過程，從第一天到現在目前都只有說明物件的樣式的處理，接下來就要來說說背景的處理。

背景漸層色

目前有使用到關於背景的語法就只有background-color，讓所指定的背景範圍套上顏色，其實還有所謂漸層的效果，大致上有分成線性、放射等方式，這邊只舉幾個簡單的範例，先製作4個盒子，HTML語法參考如下：

<div class="box linear1"></div><br>
<div class="box linear1-1"></div>
<div class="box linear2"></div>
<div class="box linear3"></div>

接著再看CSS的語法：

.box{width:300px;height:300px;}
.linear1{ background:linear-gradient(0deg,#FFF9C4 10%, #76FF03 70%, #03A9F4 100%);
.linear1-1{background:linear-gradient(#FFF9C4 , #76FF03 , #03A9F4 );}
.linear2{ background:linear-gradient(45deg, #E6EE9C 30%, #FFE0B2 30%);}
.linear3{ background:linear-gradient(90deg, #81D4FA 30%, #E1BEE7 100%);}

以linear1為例，翻譯成白話文就是往0度(12點鐘方向)，從黃色到綠色到藍色，百分比為邊界，黃色從0%開始只會到10%，綠色從10%開始只會到70%，藍色從70%至100%。linear1-1為預設值，只有放顏色，可以發現預設值是180度，剩下的顏色會平均分配進行漸層。從linear2可以發現將兩種顏色的邊界設定在同一點就呈現沒有漸層的兩個色塊。

背景放置圖案

背景圖案重複成像

一樣先建立幾個盒子，HTML可以參考前面的語法，將linear置換成下面的pic部分，相關CSS可參考以下語法：

.pic0{background-image:url("圖片位置"); background-repeat: repeat;/*預設*/}
.pic1{ background-image:url("圖片位置"); background-repeat: no-repeat;}
.pic2{ background-image:url("圖片位置"); background-repeat: repeat-x;}
.pic3{ background-image:url("圖片位置"); background-repeat: repeat-y;}

預設值就是背景圖案會不斷重複；background-repeat:no-repeat;的使用時機通常只放一張圖，通常用單一圖檔或照片為背景且不會重複，再進行位置調整等處理；repeat-x是橫向不斷重複；repeat-y是直向不斷重複。

單一照片背景範例

若放單一照片為背景，也一樣可以設定一個容器，這容器可以包住整個頁面，當然也可以先設置一個小容器來做測試，可以參考CSS語法如下：

.photo
{background: url("圖片連結") ;
 background-position: center 0; /*水平置中 垂直至頂*/
 background-repeat: no-repeat;  
/*   background-attachment: fixed; 滑鼠滾動圖片不會跟著移動 */ 
 background-size: cover; /*圖片不變形填滿整個容器，超出的部分會裁切*/
  }

一般來說若容器內的背景需要放一張照片，只要用上述的語法就沒有問題了，頂多在background-position的部分可能要調整位置，尋找要呈現的部分，應該可以應付大部分的狀況。