很多時(shí)候我們?cè)谧鼍W(wǎng)站前端頁(yè)面開發(fā)時(shí),我們都是用單純的顏色來(lái)作為背景,比如說(shuō)白色,黑色,藍(lán)色等。
但是有時(shí)候如果在定制開發(fā)的時(shí)候,設(shè)計(jì)師發(fā)來(lái)的設(shè)計(jì)稿,背景顏色為漸變色。
此時(shí)我們考慮到有兩種解決方案。
1:背景直接用圖片,即漸變的背景圖片。
比如說(shuō)我們先準(zhǔn)備一張這樣從左到右漸變的背景圖片命名為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 ); }
如此,背景漸變效果就實(shí)現(xiàn)了。
在網(wǎng)站建設(shè)過(guò)程中,如果你有其他問(wèn)題,歡迎與我們交流。這里是成都黑馬視覺網(wǎng)站建設(shè)。
有關(guān)我們服務(wù)的更多信息,請(qǐng)聯(lián)系項(xiàng)目經(jīng)理
15899750475 楊先生