CSS3 中的圖片縮放特效

用Firebug動態的查看元素的變化(HTML與CSS)

.blogs figure img { width: 100%; margin: auto; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
.blogs figure:hover img { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); }

CSS3標簽中的transform：scale(圖片縮放比例), 1代表原圖顯示, 1.1縮放1.1倍…

transform: 變形

scale: 縮放

tranistion: 過渡

站文章怎么添加圖片？在進行網站優化時，站內文章的質量很重要，其中除了需要撰寫高質量的內容，注意關鍵詞的密度布局這些，添加圖片也具有一定的優化作用，有利于提升用戶的體驗。那么如何在文章中添加圖片呢？

通常，在網站文章中添加圖片有手動、半手動和自動這三種方法。

手動添加圖片就是手動點擊添加本地的圖片，這種方式的效率較低，而且需要自己找尋合適的圖片；半手動添加圖片就是先處理好圖片并命名，打包上傳到服務器，然后利用工具批量插入圖片在服務器中的地址，找到圖片存儲文件夾，記錄其路徑，這樣文章發布時就避免手動查找圖片，比純手動添加效率高；自動添加圖片就是利用插件來實現。有一些CMS程序中會有很多插件是可以使用的，如果沒有圖片添加的相關插件，可以找人開發一個。這個插件主要實現的功能是，按照指定的圖片作為底部圖層，而后在圖片上自動生成文字，并且是以文章標題為準，這樣這篇文章就有了專屬圖片。當然，進一步優化就是實現不同文章位置插入圖片。這樣做的好處是，如果底層圖片沒有版權，而且文字可以商用，也就避免了侵權的麻煩。

了解完如何在文章中添加圖片，對于添加的圖片還有一些問題是需要注意的。

所添加的圖片大小

在處理圖片時，需要先確定圖片的正確大小，等上傳后發現尺寸不對再去修改是很浪費時間的，而圖片太大會拖累網站的加載速度，這一點是需要注意的。另外，還需要考慮網站支持格式的問題，通常是jpg、png比較好。

給圖片添加Alt標簽

搜索引擎是無法識別圖片的，必須用html標簽中的alt標簽屬性來識別，因此給圖片添加Alt標簽是必不可少的操作，這有利于蜘蛛抓取。

所添加圖片的數量

圖文結合的文章能增加用戶的閱讀體驗，但是太多的圖片會有反效果，因此一篇文章中的一兩張圖片就足夠了。另外要注意，圖片太多也會拖累網站的加載速度，所以要控制圖片的數量，不僅是和文字要有一個平衡點，還有和網站結構也要有一個平衡點。

所添加圖片相關性

在文章中添加圖片當然不是隨意添加的，應該為該頁面配備符合主題的相關圖片，要注意網站圖片和網站內容的相關聯性。

關于網站文章怎么添加圖片及圖片添加要注意的問題，我們就討論到這里，以上內容僅供參考。對于網站圖片優化的細節大家一定要多多注意，最好希望這篇能對大家進行網站優化有幫助。

言

通常，我們為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的情況，也許你可以在你的下一個項目中使用它！

在線咨詢

上一篇：請避免犯這9個常見的 CSS “壞習慣”
下一篇：初識CSS-字體圖標

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商