Css3渐变实例Demo（一）

1.指定渐变背景的大小

.div {
    background: url(../img/1.jpg);
    /*background-size:contain;*/
    width: 500px;
    height: 100px;
}

.divOne {
    width: 100%;
    height: 100%;
    border: 1px solid red;
    /*渐变，支持背景的大小和重复*/
    background: repeating-linear-gradient(to right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8));
    background-size: 100px 100px;
}

2.测试渐变背景的动画效果：

结果证明在动画中渐变背景会立刻改变。

.div {
    background: url(../img/1.jpg);
    /*background-size:contain;*/
    width: 500px;
    height: 100px;
}

.divOne {
    width: 100%;
    height: 100%;
    border: 1px solid red;
    background: repeating-linear-gradient(to right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8));
    transition: all linear 1s;
    -webkit-transition: all linear 1s;
}

.divOne:hover {
    /*600px;*/
    /*动画，对背景渐变不起作用*/
    background: repeating-linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.2));
}

3.仿照图片，实现背景的模糊化处理：

背景图：

.div {
    width: 500px;
    height: 100px;
    background: url(../img/1.jpg) repeat;
    background-size: contain;
    margin-bottom: 20px;
    position: relative;
}

.divUp {
    width: 100%;
    height: 100%;
    background: url(../img/bg_ie.png);
}

.divUp2 {
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(to right, rgba(191, 191, 191, 0.7),
        rgba(145, 152, 174, 0.75),
        rgba(163, 163, 163, 0.8));
    background-size:650px auto;
}

.mask {
    width: 100%;
    height: 100%;
    background: #10141d;
    opacity: 0.25;
    position: absolute;
    top: 0px;
    left: 0px;
}

显示结果：

更多：

Css3渐变(Gradients)-径向渐变

CSS3渐变(Gradients)-线性渐变