後端學CSS（三）
阿新 • • 發佈：2021-01-06
技術標籤：前端
後端學CSS（三））
背景
背景顏色
background-color: red; /*紅色背景 可以為rgba或hex值*/
背景圖片
background-image: url("/images/background.png");/*建議引號，否則如果路徑帶有空格會出問題*/
/*線性漸變rbga 或hex值都行，可以是很多個顏色，逗號分開*/
background-image: linear-gradient(red, yellow, blue, green);
/*第一個值也可以為向右 或任意組合*/ 背景平鋪
background-repeat: no-repeat;/*不平鋪*/
/*
repeat 平鋪（預設）。背景影象將在垂直方向和水平方向重複。
repeat-x 背景影象將在水平方向重複。
repeat-y 背景影象將在垂直方向重複。
no-repeat 不平鋪
*/ 背景剪裁
background-clip: border-box;/*預設值。*/
/*
border-box 預設值。背景繪製在邊框方框內（剪下成邊框方框）。
padding-box 背景繪製在襯距方框內（剪下成襯距方框）。
content-box 背景繪製在內容方框內（剪下成內容方框）。
*/
-webkit-background-clip: text; /*webkit才支援的，背景會根據內容的文字進行自動剪裁。*/
背景固定
background-attachment: fixed;/*固定背景圖不會跟隨滾動條變化*/
/*
scroll 預設值。背景影象會隨著頁面其餘部分的滾動而移動，比如父元素高度200且overflow為auto，子元素高度1000，會出現滾動條的情況下，背景會跟著滾動條一起移動。
fixed 當頁面的其餘部分滾動時，背景影象不會移動。
*/
背景定位
background-position: center;
/*
可以使用以下的值
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xpos ypos
如果僅規定了一個關鍵詞，那麼第二個值將是"center"。
*/
組合語句
/*
顏色 圖片 平鋪效果 位置
*/
background: green url("/images/background2.png") no-repeat center;
多個背景
/*定義了2個背景圖和位置*/
background-image: url("/images/background1.png"),url("/images/background2.png");
background-position: top left,bottom right;
background-repeat: no-repeat,no-repeat;
聚光燈例子
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color: #111;
}
span{
position: relative; /*相對定位*/
color: #333;
font-weight: bold;
font-size: 50px;
}
/*使用偽元素進行覆蓋 然後剪裁移動*/
span::after{
position: absolute; /*絕對參照父元素定位*/
top: 0;
left: 0;
content: attr(data-content);
/*
文字顏色透明 使用背景圖片按照文字剪裁，此時文字顏色會被背景色覆蓋
*/
color: transparent;
background-image: linear-gradient(to bottom right, #7A88FF, #7AFFAF);
-webkit-background-clip: text;
/*剪裁+移動動畫*/
clip-path: circle(20% at 0% 50%); /*圓半徑 at x y*/
animation: light 5s infinite;
}
@keyframes light{
/* 因為要來回移動 所以50%的時候就已經到底了 100%又還原 */
0%{
clip-path: circle(20% at 0% 50%);
}
50%{
clip-path: circle(20% at 100% 50%);
}
100%{
clip-path: circle(20% at 0% 50%);
}
}
</style>
</head>
<body>
<span data-content="這是一個簡單的例子">這是一個簡單的例子</span>
</body>
</html>
