CSS3背景与渐变

css3

浏览数:413

2019-10-9

一、CSS3 背景图像区域

background-clip(指定背景绘制区域)
ackground-clip: border-box / padding-box / content-box;

/*没有padding的时候,content-box和padding-box效果一样*/

兼容性:IE9+、FireFox、Chrome、Safari、Opera

二、CSS3 背景图像定位

background-position (背景定位)

background-position: px / % ...;

background-origin(设置元素背景图片的原始起始位置)

background-origin: padding-box|border-box|content-box;

兼容性:IE9+、FireFox4+、Chrome、Safari5+、Opera

三、CSS3 背景图像大小

background-size(指定背景图片大小)
background-size: px / % / cover / contain;

/*cover:把背景图片扩展至足够大,以使背景图片完全覆盖区域(即完全不留白)
 contain:把图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域(至少满足一边不留白)*/

兼容性:IE9+、FireFox4+、Chrome、Safari5+、Opera

四、CSS3 多重背景图像

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

/*img1放前面,img2放后面*/

五、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)

线性渐变 – 重复渐变

语法:同上,并在linear前加repeating-

径向渐变

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, ...);

径向渐变 – 颜色结点自定义分布

语法:与线性同理

径向渐变 – 设置形状

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:最远角*/

径向渐变 – 重复渐变

语法:与线性同理

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>

 

作者:Leophen