網站建設中使用CSS寫背景漸變顏色
時間：2020-02-28 來源：本站
很多時候我們在做網站前端頁面開發時，我們都是用單純的顏色來作為背景，比如說白色，黑色，藍色等。
但是有時候如果在定制開發的時候，設計師發來的設計稿，背景顏色為漸變色。
此時我們考慮到有兩種解決方案。
1：背景直接用圖片，即漸變的背景圖片。
比如說我們先準備一張這樣從左到右漸變的背景圖片命名為bg1.jpg
然后在CSS中這樣寫：
.bg1{
width:100%;
height:30px;
background:url(bg1.jpg) no-repeat;
}2: 我們利用CSS 3的新特性直接用CSS寫漸變背景。
.bg{
width:100%;
height:30px;
background-color: #29bbc3!important;
background: -moz-linear-gradient(left, #29bbc3!important 0%, #7dd5d5 100%);
background: -webkit-gradient(linear, left left, left right, color-stop(0%,#29bbc3), color-stop(100%,#7dd5d5));
background: -webkit-linear-gradient(left, #29bbc30 0%,#7dd5d5 100%);
background: -o-linear-gradient(left, #29bbc3 0%,#7dd5d5 100%);
background: -ms-linear-gradient(left, #29bbc3 0%,#7dd5d5 100%);
background: linear-gradient(to right, #29bbc3 0%,#7dd5d5100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#29bbc3', endColorstr='#7dd5d5',GradientType=0 );
}如此，背景漸變效果就實現了。
在網站建設過程中，如果你有其他問題，歡迎與我們交流。這里是深圳黑馬視覺網站建設。
