你知道空白網(wǎng)頁的顏色是什么嗎？

者：前端日志

轉(zhuǎn)發(fā)鏈接：https://mp.weixin.qq.com/s/zoEfqIwfsnAWVO8L7xuUuQ

片

一、圖片的表現(xiàn)形式

當(dāng)我們在制作頁面的時候，通常會遇到圖片的三種表現(xiàn)形式，如下：

1、內(nèi)容圖片

內(nèi)容圖片是頁面中真正的內(nèi)容，沒有內(nèi)容圖片，就無法完整的理解頁面內(nèi)容。如淘寶網(wǎng)上的商品展示圖片，這些圖片是網(wǎng)頁的一部分，它們能幫助你決定這個頁面的內(nèi)容是否是你需要的。

內(nèi)容圖片

2、布局圖片

布局圖片出現(xiàn)在頁面背景中，要想理解頁面的內(nèi)容，它們不是必須的。如蘋果官網(wǎng)的這個圖片，沒有這個圖片也能理解頁面上文字描述的內(nèi)容是什么意思。

布局圖片

3、交互圖片

圖中用紅色框起來的圖片會給你瀏覽頁面的時候帶來一些幫助，如搜索圖片，一看到就知道這里可以搜索想要的東西，購物車圖片可以看到選購的產(chǎn)品，箭頭圖片點擊可以看到更詳細(xì)的產(chǎn)品等。

交互圖片

二、創(chuàng)建內(nèi)容圖片

在HTML中我們用 img 標(biāo)簽創(chuàng)建圖片，英文是image的縮寫。

<img src="" alt="">

內(nèi)容圖片

img是空標(biāo)簽，沒有結(jié)束標(biāo)簽
src屬性的值是一個圖片的URL地址，地址可以是相對路徑，也可以是絕對路徑
alt屬性：填寫對這張圖片的簡單描述，增加圖片的可訪問性
圖片應(yīng)該被存放在單獨的文件夾中，如：images文件夾

三、創(chuàng)建布局圖片

布局圖片是在CSS中被創(chuàng)建出來的，使用CSS中的background屬性，如：

1）background-color 定義背景顏色，設(shè)置背景圖片時，要始終設(shè)置背景顏色，確保背景圖片沒有成功時會顯示一個背景顏色

2）background-image 可以指向一個相對路徑或者絕對路徑來添加圖片。

3）background-repeat可以設(shè)置背景是否平鋪在容器中，包含四個關(guān)鍵字：

background-repeat：repeat 可以設(shè)置背景圖片橫向和縱向都平鋪。
background-repeat：no-repeat 設(shè)置圖片不平鋪，圖片默認(rèn)顯示在容器的左上角
background-repeat：repeat-x 設(shè)置圖片只能在橫向平鋪
background-repeat：repeat-y 設(shè)置圖片只能在縱向平鋪

4）background-position 屬性可以控制背景圖片顯示在什么位置，包含兩個關(guān)鍵字，如：

background-position：top left 設(shè)置圖片顯示在容器的左上角，第一個關(guān)鍵字可以是top、center、bottom，第二個關(guān)鍵字可以是left、center、right

CSS中和背景相關(guān)的屬性可以簡寫在一行中，如：

background: #FF1298 url(images/logo.png) center right no-repeat;

首先是圖片的顏色color，image，position，repeat，CSS屬性能用簡寫就盡量用簡寫，簡寫比分開寫性能更高。

布局圖片

四、創(chuàng)建用戶交互圖片

Web上最常用的三種圖像格式

1）Jpeg 可以展示一張照片或者復(fù)雜圖像

可以表示多達1600萬種顏色，即所有的十六進制顏色
不支持圖像透明
不支持動畫
擴展名為.jpg或.jpeg

2）png最適合展示網(wǎng)頁插畫、logo和網(wǎng)頁小圖標(biāo)

可以表示上百萬種不同顏色的圖像
包括png-8、png-24和png-32，取決于想表示多少種顏色
可以設(shè)置顏色透明
不支持動畫
擴展名為.png

3）gif適合展示網(wǎng)頁插畫、logo和網(wǎng)頁小圖標(biāo)

可以表示最多256種不同顏色
可以設(shè)置顏色透明
支持動畫
擴展名是.gif

建議：

復(fù)雜顏色的圖像和照片則要使用jpeg格式
動態(tài)圖像要使用gif格式
png格式的透明圖片要比gif格式的更平滑
這三種圖像相對于其他格式的圖像文件比較小，適合web頁面高效展示

一般情況下用戶交互圖片都是一些小圖標(biāo)，所以使用png或gif作為用戶交互圖片；使用CSS的background屬性以背景圖片的形式為網(wǎng)頁添加用戶交互圖片；推薦把用戶交互圖片放在同一個文件中，可以提高網(wǎng)絡(luò)和服務(wù)器性能，如：

交互圖片

具體如何操作呢？后續(xù)教頭會通過視頻給大家詳細(xì)演示，請繼續(xù)關(guān)注。

言

通常，我們?yōu)閐iv盒子或者圖片設(shè)置陰影使用 box-shadow 屬性，代碼如下：

box-shadow: 10px 10px 10px gray;

問題拋出

使用 box-shadow 屬性給div盒子設(shè)置陰影倒還好，如果用在透明的圖片上，陰影會變成方形的，讓其看起來像添加了一個邊框一樣。

解決方法

我們可以通過css的另一種參數(shù)，為透明png實現(xiàn)基于透明圖片的陰影效果，效果如下圖，左側(cè)是 box-shadow ，右側(cè) drop-shadow 。

drop-shadow()說明：

drop-shadow() 是CSS中用于為圖像或文本添加陰影效果的一個函數(shù)，?它屬于 filter 屬性的一部分。?這個函數(shù)允許你為元素創(chuàng)建陰影，?而不需要考慮元素的形狀或邊界框。?與 box-shadow 不同，?drop-shadow 可以應(yīng)用于非矩形形狀，?如透明的PNG或SVG圖像，?它使用元素的Alpha蒙版來決定陰影的形狀。?這意味著，?即使元素沒有背景，drop-shadow 也能為圖像的非透明部分創(chuàng)建陰影。?

drop-shadow()語法如下：

filter: drop-shadow( offset-x offset-y blur-radius spread-radius color )

drop-shadow()參數(shù)說明如下：

offset-x：該參數(shù)設(shè)置圖像的水平偏移量。正值創(chuàng)建右側(cè)偏移，負(fù)值創(chuàng)建左側(cè)偏移。
offset-y：此參數(shù)設(shè)置圖像的垂直偏移量。正值創(chuàng)建到底部的偏移量，負(fù)值創(chuàng)建到頂部的偏移量。
blur-radius：設(shè)置模糊半徑的值。它是一個可選參數(shù)。
spread-radius：設(shè)置傳播半徑的值。它是一個可選參數(shù)。
color：設(shè)置投影的顏色。它的可選參數(shù)。

演示代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .img_box .left_img{
      box-shadow: 10px 10px 10px gray;
    }
    .img_box .right_img{
      filter: drop-shadow(2px 4px 8px rgb(225, 170, 170));
    }
  </style>
</head>
<body>

  <div class="img_box">
    <img class="left_img" src="./lihua.png" />
    <img class="right_img" src="./lihua.png" />
  </div>
  
</body>
</html>

總結(jié)

盡管有很好的支持，但 drop-shadow 濾鏡仍然沒有得到充分的利用。我希望這篇文章強調(diào)了一些使用 box-shadow的情況，也許你可以在你的下一個項目中使用它！

在線咨詢

上一篇：原生前端小案例：如何使用HTML5 Canvas構(gòu)建畫板應(yīng)用程序
下一篇：HTML5教程關(guān)于canvas的線條知識，可以這樣總結(jié)方法

您的項目需求

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

整合營銷服務(wù)商