CSS3背景與漸變

時間 2019-11-10

標籤 css3 css 背景漸變欄目 CSS 简体版

原文原文鏈接

1、CSS3 背景圖像區域

background-clip

（指定背景繪製區域）
ackground-clip: border-box / padding-box / content-box;
/*沒有padding的時候，content-box和padding-box效果同樣*/
複製代碼
兼容性：IE9+、FireFox、Chrome、Safari、Operacss

2、CSS3 背景圖像定位

background-position

（背景定位）
background-position: px / % ...;
複製代碼

background-origin

（設置元素背景圖片的原始起始位置）
background-origin: padding-box|border-box|content-box;
複製代碼
兼容性：IE9+、FireFox4+、Chrome、Safari5+、Operahtml

3、CSS3 背景圖像大小

background-size

（指定背景圖片大小）

background-size: px / % / cover / contain;

/*cover：把背景圖片擴展至足夠大，以使背景圖片徹底覆蓋區域（即徹底不留白）
 contain：把圖像擴展至最大尺寸，以使其寬度和高度徹底適應內容區域（至少知足一邊不留白）*/
複製代碼

兼容性：IE9+、FireFox4+、Chrome、Safari5+、Operaweb

4、CSS3 多重背景圖像

background-image: url(img1.jpg), url(img2.png);

/*img1放前面，img2放後面*/
複製代碼

5、CSS3 漸變

線性漸變 - 從上到下

（默認）
background: linear-gradient(direction, color-stop1, color-stop2, ...);
複製代碼
兼容性：IE10+、FireFox16+（3.6 –moz-內核）、Chrome26+（10.0 –webkit-）、Safari6.1+（5.1 –>webkit-）、Opera12.1+（11.6 –o-）瀏覽器

線性漸變 - 從左到右

background:-webkit-linear-gradient( begin-direction, color-stop1, color-stop2, ...);
background:   -moz-linear-gradient( end-direction, color-stop1, color-stop2, ...);
background:     -o-linear-gradient( end-direction, color-stop1, color-stop2, ...);
background:        linear-gradient(to end-direction, color-stop1, color-stop2, ...);
/*注意webkit是起始方向*/
複製代碼

線性漸變 – 對角

background:-webkit-linear-gradient( begin-level begin-vertical, color-stop1, color-stop2, ...);
background:   -moz-linear-gradient( end-level end-vertical,color-stop1, color-stop2, ...);
background:     -o-linear-gradient( end-level end-vertical,color-stop1, color-stop2, ...);
background:        linear-gradient( to end-level end-vertical,color-stop1, color-stop2, ...);
/*注意webkit是起始方向*/
複製代碼

線性漸變 – 自定義角度

background:-webkit-linear-gradient(angle, color-stop1, color-stop2, ...);  //默認從左往右
background:   -moz-linear-gradient(angle, color-stop1, color-stop2, ...);  //默認從下往上
background:     -o-linear-gradient(angle, color-stop1, color-stop2, ...);  //默認從下往上
background:        linear-gradient(angle, color-stop1, color-stop2, ...);  //默認從下往上（優先級高）
/*angle單位deg*/
複製代碼

線性漸變 – 顏色結點自定義分佈

語法：同上，並在顏色值後加上「空格+百分比」
（透明色：transparent）ide

線性漸變 – 重複漸變

語法：同上，並在linear前加repeating-ui

徑向漸變

background: radial-gradient(center, shape size, start-color, ..., last-color);

/*center默認居中，可不寫 center值改成：px / %等可定位圓心位置*/
複製代碼

徑向漸變 - 顏色結點均勻分佈

（默認）

background:-webkit-radial-gradient(color-stop1, color-stop2, ...);
background:   -moz-radial-gradient(color-stop1, color-stop2, ...);
background:     -o-radial-gradient(color-stop1, color-stop2, ...);
background:        radial-gradient(color-stop1, color-stop2, ...);
複製代碼

徑向漸變 - 顏色結點自定義分佈

語法：與線性同理url

徑向漸變 – 設置形狀

background:-webkit-radial-gradient(shape, color-stop1, color-stop2, ...);
background:   -moz-radial-gradient(shape, color-stop1, color-stop2, ...);
background:     -o-radial-gradient(shape, color-stop1, color-stop2, ...);
background:        radial-gradient(shape, color-stop1, color-stop2, ...);

/*shape的值： circle —— 圓形 ellipse —— 橢圓（默認）*/
複製代碼

徑向漸變 – 尺寸大小

（關鍵字的使用）

background:-webkit-radial-gradient(size, color-stop1, color-stop2, ...);
background:   -moz-radial-gradient(size, color-stop1, color-stop2, ...);
background:     -o-radial-gradient(size, color-stop1, color-stop2, ...);
background:        radial-gradient(size, color-stop1, color-stop2, ...);

/*關鍵字size說明（相對圓心） closest-side：最近邊 farthest-side：最遠邊 closest-corner：最近角 farthest-corner：最遠角*/
複製代碼

徑向漸變 – 重複漸變

語法：與線性同理spa

IE低版本瀏覽器的漸變

filter:progid:DXImageTransform.Microsoft.gradient( >StartColorstr='color1',EndColorstr='color2',GradientType=0);
複製代碼

綜合案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>綜合</title>
    <style type="text/css"> div { width: 800px; height: 500px; background: #abcdef; background-size: 50px 50px; background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)), -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)), -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #555)), -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #555)); background-image: -moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent), -moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent), -moz-linear-gradient(45deg, transparent 75%, #555 75%), -moz-linear-gradient(-45deg, transparent 75%, #555 75%); background-image: -o-linear-gradient(45deg, #555 25%, transparent 25%, transparent), -o-linear-gradient(-45deg, #555 25%, transparent 25%, transparent), -o-linear-gradient(45deg, transparent 75%, #555 75%), -o-linear-gradient(-45deg, transparent 75%, #555 75%); background-image: linear-gradient(45deg, #555 25%, transparent 25%, transparent), linear-gradient(-45deg, #555 25%, transparent 25%, transparent), linear-gradient(45deg, transparent 75%, #555 75%), linear-gradient(-45deg, transparent 75%, #555 75%); } </style>
</head>

<body>
    <div></div>
</body>

</html>複製代碼

1. css3背景與漸變
2. CSS3背景與漸變
3. css3 背景漸變
4. CSS3背景，漸變
5. CSS3邊框，背景，漸變.........
6. css3背景顏色漸變
7. css3背景，蒙版，漸變
8. css3背景色漸變
9. CSS3背景漸變特性
10. CSS3 漸變背景詳解
更多相關文章...
• ionic 背景層 - ionic 教程
• SVG 漸變 - 線性 - SVG 教程
• Composer 安裝與使用
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。