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 {
    /*width: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)-線性漸變