国产沈阳熟女视频|骚视频97网站一区日本在线视频|久1社区在线视频|综合久久国外自产拍无码精品视频|亚洲欧美Tv先锋|综合五月天网址制服丝袜在线露脸|1024欧美手机视频我不卡|日本二区欧美亚洲国产|丁香五月婷婷五月|综合 另类 一区

  • <span id="62i9y"></span>
    1. 284292114@qq.com 中國站
      行業(yè)新聞 網(wǎng)站建設 網(wǎng)絡推廣 首頁>新聞中心>網(wǎng)站建設

      網(wǎng)站建設中使用CSS寫背景漸變顏色

      時間:2020-02-28   訪問量:0

      很多時候我們在做網(wǎng)站前端頁面開發(fā)時,我們都是用單純的顏色來作為背景,比如說白色,黑色,藍色等。

      但是有時候如果在定制開發(fā)的時候,設計師發(fā)來的設計稿,背景顏色為漸變色。

      此時我們考慮到有兩種解決方案。


      1:背景直接用圖片,即漸變的背景圖片。

      QQ截圖20200228104802.jpg

      比如說我們先準備一張這樣從左到右漸變的背景圖片命名為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 );
      }


      如此,背景漸變效果就實現(xiàn)了。

      在網(wǎng)站建設過程中,如果你有其他問題,歡迎與我們交流。這里是成都黑馬視覺網(wǎng)站建設。

      服務咨詢
      1對1咨詢,專業(yè)客服為您解疑答惑
      聯(lián)系銷售
      15899750475
      在線咨詢
      聯(lián)系在線客服,為您解答所有的疑問