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介绍与使用