樣式化您的圖像並在樣式中使用圖像
許多人使用CSS來調整文本，改變字體，顏色，大小等等。 但是很多人經常會忘記的一件事是，你也可以在圖像中使用CSS。
改變圖像本身
CSS允許您調整圖像在頁面上的顯示方式。 這對保持頁面的一致性非常有用。 通過在所有圖像上設置樣式，可以為圖像創建標準外觀。 你可以做的一些事情：
- 在圖像周圍添加邊框或輪廓
- 去除鏈接圖像周圍的彩色邊框
- 調整圖像的寬度和/或高度
- 添加陰影
- 旋轉圖像
- 當圖片懸停時更改樣式
給你的圖片邊框是一個很好的開始。 但是你應該考慮的不僅僅是邊界 - 考慮圖像的整個邊緣並調整邊距和填充 。 帶有黑色邊框的圖像看起來不錯，但在邊框和圖像之間添加一些填充效果可能會更好。
img {
邊框：1px純黑色;
填充：5px;
}
如有可能， 始終鏈接非裝飾圖像是一個不錯的主意。 但是當你這樣做時，請記住大多數瀏覽器在圖像周圍添加了一個彩色邊框。 即使您使用上述代碼更改邊框，鏈接也會覆蓋該邊框，除非您移除或更改鏈接邊框。 為此，您應該使用CSS子規則刪除或更改鏈接圖像周圍的邊框：
img> a {
border：none;
}
您還可以使用CSS來更改或設置圖像的高度和寬度。 雖然由於下載速度而使用瀏覽器調整圖像大小並不是一個好主意，但它們在調整圖像大小方面變得更好，因此它們仍然很好看。 使用CSS，您可以將圖像設置為標準寬度或高度，甚至可以將尺寸設置為相對於容器。
請記住，當您調整圖像大小時，為了獲得最佳效果，您只應調整一個維度 - 高度或寬度。 這將意味著圖像保持其高寬比，所以看起來並不奇怪。 將其他值設置為自動或將其忽略以告知瀏覽器保持縱橫比一致。
img {
寬度：50％;
身高：自動;
}
CSS3通過新的屬性object-fit和object-position為這個問題提供了一個解決方案。 使用這些屬性，您將能夠定義確切的圖像高度和寬度以及應如何處理高寬比。 這可能會在您的圖像周圍創建letterboxing效果，或者裁剪以使圖像適合所需的大小。
儘管CSS3對象適合度和對象位置屬性尚未得到廣泛支持，但在大多數現代瀏覽器中都可以使用其他CSS3屬性，這些屬性可用於修改圖像。 諸如陰影，圓角以及旋轉，傾斜或移動圖像等現在在大多數現代瀏覽器中都可以正常工作。 然後，您可以使用CSS轉換來使圖像在盤旋，單擊或稍後一段時間後更改。
使用圖像作為背景
CSS可以很容易地創建你的圖像花哨的背景。
您可以將背景添加到整個頁面或僅添加特定元素。 使用background-image屬性在頁面上創建背景圖像很容易：
身體 {
background-image：url（background.jpg）;
}
將主體選擇器更改為頁面上的特定元素，以便僅將背景放在一個元素上。
你可以用圖像做的另一件有趣的事情是創建一個不會隨著頁面其餘部分滾動的背景圖像 - 就像水印一樣。 您只需使用樣式background-attachment：fixed; 連同你的背景圖片。 其他背景選項包括使用背景重複屬性將它們水平或垂直平鋪。
寫背景重複：repeat-x; 水平平鋪圖像和background-repeat：repeat-y; 垂直平鋪。 您可以使用background-position屬性定位您的背景圖像。
而且CSS3為您的背景添加了更多樣式。 您可以拉伸您的圖像以適應任何尺寸的背景，或設置背景圖像以隨窗口大小縮放 。 您可以更改位置，然後剪切背景圖像。 但關於CSS3的最好的事情之一是，你現在可以分層多個背景圖像來創建更複雜的效果。
HTML5幫助樣式圖片
HTML5中的圖形元素應放置在任何可以獨立存在於文檔中的圖像周圍。 想一想的一種方法是如果圖像可能出現在附錄中，那麼它應該在圖形元素內。 然後，您可以使用該元素和FIGCAPTION元素為您的圖像添加樣式。