整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          你知道空白網頁的顏色是什么嗎?


          者:前端日志

          轉發鏈接:https://mp.weixin.qq.com/s/zoEfqIwfsnAWVO8L7xuUuQ

          一、圖片的表現形式

          當我們在制作頁面的時候,通常會遇到圖片的三種表現形式,如下:

          1、內容圖片

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

          內容圖片

          2、布局圖片

          布局圖片出現在頁面背景中,要想理解頁面的內容,它們不是必須的。如蘋果官網的這個圖片,沒有這個圖片也能理解頁面上文字描述的內容是什么意思。

          布局圖片

          3、交互圖片

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

          交互圖片

          二、創建內容圖片

          在HTML中我們用 img 標簽創建圖片,英文是image的縮寫。

          <img src="" alt="">

          內容圖片

          • img是空標簽,沒有結束標簽
          • src屬性的值是一個圖片的URL地址,地址可以是相對路徑,也可以是絕對路徑
          • alt屬性:填寫對這張圖片的簡單描述,增加圖片的可訪問性
          • 圖片應該被存放在單獨的文件夾中,如:images文件夾

          三、創建布局圖片

          布局圖片是在CSS中被創建出來的,使用CSS中的background屬性,如:

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

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

          3)background-repeat可以設置背景是否平鋪在容器中,包含四個關鍵字:

          • background-repeat:repeat 可以設置背景圖片橫向和縱向都平鋪。
          • background-repeat:no-repeat 設置圖片不平鋪,圖片默認顯示在容器的左上角
          • background-repeat:repeat-x 設置圖片只能在橫向平鋪
          • background-repeat:repeat-y 設置圖片只能在縱向平鋪

          4)background-position 屬性可以控制背景圖片顯示在什么位置,包含兩個關鍵字,如:

          background-position:top left 設置圖片顯示在容器的左上角,第一個關鍵字可以是top、center、bottom,第二個關鍵字可以是left、center、right

          CSS中和背景相關的屬性可以簡寫在一行中,如:

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

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

          布局圖片

          四、創建用戶交互圖片

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

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

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

          2)png最適合展示網頁插畫、logo和網頁小圖標

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

          3)gif適合展示網頁插畫、logo和網頁小圖標

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

          建議:

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

          一般情況下用戶交互圖片都是一些小圖標,所以使用png或gif作為用戶交互圖片;使用CSS的background屬性以背景圖片的形式為網頁添加用戶交互圖片;推薦把用戶交互圖片放在同一個文件中,可以提高網絡和服務器性能,如:

          交互圖片

          交互圖片

          具體如何操作呢?后續教頭會通過視頻給大家詳細演示,請繼續關注。

          通常,我們為div盒子或者圖片設置陰影使用 box-shadow 屬性,代碼如下:

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

          問題拋出

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

          解決方法

          我們可以通過css的另一種參數,為透明png實現基于透明圖片的陰影效果,效果如下圖,左側是 box-shadow ,右側 drop-shadow 。

          drop-shadow()說明:

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

          drop-shadow()語法如下:

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

          drop-shadow()參數說明如下:

          • offset-x:該參數設置圖像的水平偏移量。正值創建右側偏移,負值創建左側偏移。
          • offset-y:此參數設置圖像的垂直偏移量。正值創建到底部的偏移量,負值創建到頂部的偏移量。
          • blur-radius:設置模糊半徑的值。它是一個可選參數。
          • spread-radius:設置傳播半徑的值。它是一個可選參數。
          • color:設置投影的顏色。它的可選參數。

          演示代碼如下:

          <!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>

          總結

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


          主站蜘蛛池模板: 日韩动漫av在线播放一区| 亚洲综合色自拍一区| 中文字幕一区二区区免| 在线观看日本亚洲一区| 国产在线精品一区二区高清不卡| 在线播放国产一区二区三区 | 国产成人无码一区二区三区| 国产一区二区内射最近更新| 一区二区在线视频免费观看| 波多野结衣一区二区| 精品视频一区二区三区在线观看| 久99精品视频在线观看婷亚洲片国产一区一级在线 | 午夜福利一区二区三区高清视频| 日本精品夜色视频一区二区| 国产成人精品亚洲一区| 手机福利视频一区二区| 中文乱码字幕高清一区二区| 亚洲国产美女福利直播秀一区二区| 国产精品日本一区二区在线播放| 成人乱码一区二区三区av| 国产伦精品一区二区三区视频猫咪| 日本一区二区在线免费观看| 国产伦精品一区二区三区无广告| 国产一区二区三区四| 午夜精品一区二区三区在线观看| 日韩一区在线视频| 高清一区高清二区视频| av在线亚洲欧洲日产一区二区| 国产高清在线精品一区小说| 精品一区二区三区色花堂| 国精品无码A区一区二区| 日韩精品无码视频一区二区蜜桃| 中文字幕在线无码一区| 久久久久人妻精品一区蜜桃| 亚洲熟妇av一区| 精品国产高清自在线一区二区三区| 在线不卡一区二区三区日韩| 日韩一区二区三区免费播放| 国产美女露脸口爆吞精一区二区 | 日本亚洲国产一区二区三区| 精品亚洲综合在线第一区|