在建網(wǎng)站的中常見的五種背景圖片的使用方法

在建網(wǎng)站的過程當(dāng)中使用背景圖片似乎是繞不過去的一個(gè)環(huán)節(jié)，背景圖的使用能更好的襯托出想要表達(dá)的內(nèi)容，也可以讓局部細(xì)節(jié)達(dá)到最完美的狀態(tài)，合理使用背景能夠讓視覺感官有一個(gè)更加的舒服體驗(yàn)，專業(yè)設(shè)計(jì)師會(huì)讓背景用的恰到好處，沒有目的的使用往往會(huì)適得其反，不僅達(dá)不到想要表現(xiàn)的效果，反而還會(huì)喧賓奪主影響主體內(nèi)容的表現(xiàn)。

　　建網(wǎng)站時(shí)對(duì)于圖片的顏色也有一定的選擇技巧，鄭州建企業(yè)網(wǎng)站時(shí)可以選擇和主頁面相溶合的顏色，以達(dá)到視覺平滑，分享幾點(diǎn)背景圖片的使用方法：

　　第一種用法：幻燈圖或大banner圖

　　一個(gè)當(dāng)下的網(wǎng)站往往離不開大尺寸的幻燈圖片或banner大圖，大圖組合創(chuàng)意和文字給人帶來的視覺效果是相當(dāng)震撼的，再加上一般會(huì)顯示在網(wǎng)頁的第一屏重要程度不用言語，使用方式一般做背景來用，寬度1920px高度不超過700px，只要是新做的網(wǎng)站都會(huì)有這個(gè)模塊。

　　第二種用法：頁面中間固定模式

　　在這種使用方式下，大圖片一般會(huì)以全屏尺寸來設(shè)計(jì)，如1920X900px的尺寸，平鋪不重復(fù)做為網(wǎng)頁某一塊的背景，同時(shí)設(shè)置圖片展現(xiàn)行為fixed固定不動(dòng)，當(dāng)用戶拉動(dòng)網(wǎng)頁下拉滾動(dòng)條的時(shí)候會(huì)造成頁面內(nèi)容在往上移動(dòng)而背景固定不動(dòng)的視頻效果。

　　第三種用法：小范圍頻道背景

　　往往使用于網(wǎng)頁小塊的頻道頭或分類標(biāo)題下，可以是純顏色，如果想要達(dá)到很好的視覺效果就只能使用圖片，做為背景圖片時(shí)顏色往往較重，而上面的文字一般用亮色，用一個(gè)重的背景來襯托文字，視覺效果相當(dāng)不錯(cuò)。

　　第四種用法：局部動(dòng)態(tài)效果展示

　　在這種展示效果中用到的背景圖片往往是以PNG圖片為主的透明素材，用DIV+CSS寫好布局再加CSS3的動(dòng)畫特效，能給人非常強(qiáng)烈的視覺體驗(yàn)，CSS3動(dòng)畫效果的強(qiáng)大也是FLASH沒落的一個(gè)重要原因。

　　第五種用法：網(wǎng)頁精靈圖(css sprites)

　　所謂網(wǎng)頁精靈圖Sprites即使用一張大圖把整個(gè)或部分網(wǎng)頁用到的小圖都全部集中到一張圖片上，然后在網(wǎng)頁使用時(shí)再通過各個(gè)小圖的坐標(biāo)位置來分別調(diào)用，使用負(fù)值來調(diào)用分別對(duì)應(yīng)的圖片位置。

言

希望在本篇文章中介紹一下頁面Banner和文章列表的樣式開發(fā)，因?yàn)閭€(gè)人比較喜歡Banner，我們可以在Banner位置展示一下我們Blog的Title，可以介紹一下自己或者自己的座右銘等等。所以我們先從Banner開始著手。

步入正文，定制化Banner和文章列表主要包括如下步驟：

在config.toml文件中定義title，描述等變量；
為各個(gè)組件設(shè)置相應(yīng)的css樣式。

方案

分別為banner在partials文件夾中創(chuàng)建banner.html文件，以及在assets/scss/Components文件夾中創(chuàng)建_banner.scss文件。

編輯banner.html文件：

{{ with .Site.Params.banner }}
  {{ if .enable }}
  {{ "<!-- Site Hero Start -->" | safeHTML }}
  <section class="site-hero" >
    <div class="container">
      <div class="row">
        <div class="col-lg-10 mx-auto">
          <div class="site-hero-content text-center">
            <h6>{{ .tagline }}</h6>
            <h1>
              {{ .heading }}
            </h1>
          </div>
        </div>
      </div>
    </div>
  </section>
  {{ "<!-- Site Hero End -->" | safeHTML }}
  {{ end }}
{{ end }}

編輯對(duì)應(yīng)的css文件，樣式如下：

.site-hero {
  position: relative;
  height: 55vh;
  background-size: cover;
  background-position: center center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  background-color: $left-hero-color; /* 瀏覽器不支持的時(shí)候顯示 */
  background-image: repeating-linear-gradient(120deg,$left-hero-color 0%,$left-hero-color 49.9%, $right-hero-color 50%,$right-hero-color 100%);

  @include desktop {
    height: auto;
    padding: 200px 0;
  }

  @include mobile {
    padding: 100px 0;
  }

  &-content {
    
    h6{
      margin-top: 60px;
      color: $tagline-text-color;
    }
    h1 {
      color: $heading-text-color;
      margin-bottom: 0px;
      @include desktop-lg {
        font-size: 40px;
        margin-bottom: 0px;
      }
      @include mobile {
        font-size: 40px;
      }
    }   
  }

  &-scroll {
    position: absolute;
    left: 50%;
    bottom: 70px;
    transform: translateX(-55%);
  }
}

最后，在style.scss中通過@import 語句將_banner.scss 引入到項(xiàng)目中。

@import "components/banner";

通過../hugo.exe server --watch 啟動(dòng)項(xiàng)目后，可以看一下導(dǎo)航欄的效果。

近在學(xué)習(xí)jquery，發(fā)現(xiàn)jquery上手比javascript容易許多，因?yàn)橛兄己玫奈臋n和幫助手冊(cè)，如果遇到一些問題可以借助文檔來解決。初步接觸學(xué)習(xí)jquery，我發(fā)現(xiàn)學(xué)習(xí)jquery主要是學(xué)會(huì)如何使用內(nèi)置的方法。

今天就跟大家一起分享下，我用jquery寫的一個(gè)banner全屏特效切換的案例，以及制作它運(yùn)用了哪些jquery內(nèi)置方法。

思路：

注：這里說的是JS中的思路，至于布局的話，可以下載源碼自己研究。

第一步、讓切換按鈕動(dòng)起來

上圖中有4個(gè)小切換按鈕，當(dāng)鼠標(biāo)每滑動(dòng)到一個(gè)切換按鈕的位置，則相對(duì)應(yīng)的添加一個(gè)樣式。（一個(gè)橘黃色的小圓點(diǎn)）

第二步、讓圖片動(dòng)起來

當(dāng)滑動(dòng)每個(gè)相對(duì)應(yīng)切換按鈕時(shí)，我們的背景圖片也需要隨著切換。

第三步、讓它自動(dòng)切換

當(dāng)鼠標(biāo)沒有滑動(dòng)到切換按鈕時(shí)，則讓它自動(dòng)切換，這里需定義一個(gè)定時(shí)任務(wù)。（setInterval）

根據(jù)上圖jquery代碼中，下面總結(jié)了此次特效所用到的方法：

eq()方法;尋找當(dāng)前索引

mouseover()方法；當(dāng)鼠標(biāo)滑動(dòng)到元素上方，則發(fā)生該事件

mouseout()方法;當(dāng)鼠標(biāo)離開時(shí)，則發(fā)生該事件

index()方法;查找索引值

addClass()方法;添加樣式

sibling()方法;獲取當(dāng)前元素的同輩其他元素

fadeIn()方法;淡入

fadeOut()方法;淡出

以及javascript中的setInterval()方法;定義一個(gè)定時(shí)任務(wù)。和clearInterval()方法;停止定時(shí)任務(wù)

本地下載

寫在最后：覺得不管做什么事情,思路非常重要，如果沒有思路就不知道如何下手。就像開發(fā)一個(gè)網(wǎng)站一樣，如果你不知道它的開發(fā)流程是什么？那么你肯定很迷茫，網(wǎng)站如何去做？第一步該怎么下手。這樣你就會(huì)認(rèn)為做一個(gè)網(wǎng)站很難。同樣的道理：學(xué)習(xí)jquery首先我認(rèn)為得明白每個(gè)方法是什么含義，只有先明白了這些方法的含義，以及怎么去使用。在項(xiàng)目實(shí)戰(zhàn)的時(shí)候你才不會(huì)迷茫。（個(gè)人經(jīng)驗(yàn)，不喜勿噴！）

在線咨詢

上一篇：css基礎(chǔ)快速入門-5 列表ul li.html
下一篇：一篇文章帶你了解CSS 文本樣式

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

在建網(wǎng)站的中常見的五種背景圖片的使用方法

言

相關(guān)基礎(chǔ)

方案

您的項(xiàng)目需求