教育行業(yè)A股IPO第一股(股票代碼 003032)

全國咨詢/投訴熱線:400-618-4000

web前端開發(fā)培訓(xùn)之CSS3圖片倒影技術(shù)

更新時間:2016年10月13日10時36分 來源:傳智播客前端與移動開發(fā)學(xué)院 瀏覽次數(shù):

有很多CSS新屬性并未包含進(jìn)CSS3官方標(biāo)準(zhǔn)中,像谷歌瀏覽器或火狐瀏覽器等都會利用CSS的瀏覽器引擎前綴(Vendor Prefix)來實現(xiàn)很多自定義的CSS功能。-webkit-box-reflect屬性就是以谷歌瀏覽器為代表的Webkit渲染引擎獨(dú)有的特征。-webkit-box-reflect的作用是讓圖片出現(xiàn)倒影。
實現(xiàn)倒影的基本語法

實現(xiàn)倒影的基本語法非常的直觀,假設(shè)我們想給下面的圖片增加倒影效果,可以這樣寫:

  1. <font size="3">  img {
  2.   -webkit-box-reflect: below;
  3.   }</font>



上面這個例子中倒影出現(xiàn)了圖片的下方,但實際上我們也可以將倒影安置在左側(cè)、右側(cè)或上側(cè)。

倒影偏移量

Offset屬性值用來定義圖片和倒影影像之間的間距。參考下面的代碼:


  1. <font color="rgb(85, 85, 85)"><font size="3"> img {
  2.   -webkit-box-reflect: below 10px;
  3.   }</font></font>

上面的代碼中,我們使圖片和倒影影像之間相聚10px;


給倒影增加消隱效果

在現(xiàn)實生活中,倒影的出現(xiàn)通常是上半部比較清晰,下面半部逐漸消隱。為了在CSS中實現(xiàn)這種效果,我們需要運(yùn)用CSS3漸變色(Gradients)功能,就像下面這樣:


  1. <font color="rgb(85, 85, 85)"><font size="3"> -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.1)));</font></font>

這段代碼就能達(dá)到這樣的效果:


我們還可以使用color-stop來控制色彩過渡,讓倒影更加漂亮: 


  1. <font color="rgb(85, 85, 85)"><font size="3"> img {
  2.   -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent) , to(rgba(250, 250, 250, 0.1)));
  3.   }
  4. </font></font>


火狐瀏覽器中倒影的實現(xiàn)

目前只有Webkit瀏覽器(谷歌瀏覽器和Safari瀏覽器)實現(xiàn)box-reflect屬性。為了在火狐瀏覽器中也實現(xiàn)倒影功能,我們需要尋找另外的途徑:使用-moz-element()方法。這個方法能夠復(fù)制指定網(wǎng)頁元素的內(nèi)容。讓我們來看看下面的例子:

我們把圖片包裹著一個ID是someid的里。并且,為了存放倒影影像,我們將使用:before偽元素,就像下面:

  1. <font color="rgb(85, 85, 85)"><font size="3"> #someid {
  2.   position: relative;
  3.   /* 給倒影留下空間 */
  4.   margin-bottom: 120px;
  5.   }
  6.   #someid:before {
  7.   content:""; /* needed or nothing will be shown */
  8.   background: -moz-linear-gradient(top, white, white 30%, rgba(255,255,255,0.9) 65%, rgba(255,255,255,0.7)) 0px 0px,
  9.   -moz-element(#someid) 0px -127px no-repeat;
  10.   -moz-transform: scaleY(-1); /* flip the image vertically */
  11.   position:relative;
  12.   height:140px;
  13.   width: 360px; /* 需要 > image width + margin + shadow */
  14.   top: 247px;
  15.   left:0px;
  16.   }
  17. </font></font>

這里的-moz-transform是一個負(fù)值,作用就是讓復(fù)制過來的圖形上下顛倒,達(dá)到倒影的效果。為了讓:before偽元素跟原始圖形相配合,我們需要移動它的位置。這里的背景偏移量 (-127px)是:before偽元素高(140px) – (圖片的高 (247px) + div的border (20px))。需要注意的是,火狐瀏覽器版的倒影實現(xiàn)只能用在頁面的背景是真實背景。背景色要和:before偽元素使用的漸變色的顏色一致。

因為所有的屬性都是來實現(xiàn)倒影的,而且這些屬性都有火狐瀏覽器獨(dú)有的前綴,和Webkit的倒影不沖突,所以在代碼在可以把兩個版本倒影方法都寫上,保證兩種瀏覽器里都有效果。

視頻倒影

官方文檔中說當(dāng)?shù)褂暗膶嶓w內(nèi)容變化時,倒影的內(nèi)容也會相應(yīng)更新。因此,這種技術(shù)用在視頻是有特殊的效果。

CSS倒影技術(shù)在火狐瀏覽器中的小問題

有時,火狐瀏覽器生成的漸變色圖形會比背景元素稍微小一些,導(dǎo)致有一些間隙線出現(xiàn)。為了避免這種情況出現(xiàn),在:before偽元素的頂部和底部加1px的padding,并且分別設(shè)置背景的裁剪方式和原點:


  1.   padding: 1px 0px;
  2.   background-origin: border-box, content-box;
  3.   background-clip: border-box, content-box;



本文版權(quán)歸傳智播客web前端開發(fā)培訓(xùn)學(xué)院所有,歡迎轉(zhuǎn)載,轉(zhuǎn)載請注明作者出處,謝謝!
作者:傳智播客web前端開發(fā)培訓(xùn)學(xué)院
首發(fā):http://m.fskzgqt.cn/web/
0 分享到:
和我們在線交談!