當涉及到網頁設計時，迷人的視覺效果可以使一切變得不同。影象在創造一個有吸引力的和令人難忘的使用者體驗方面起著至關重要的作用。
但是，你如何將你的影象從普通到非凡？這就是影象造型的作用。藉助CSS的力量，你可以釋放你的創造力，將你的圖片轉化為吸引人的視覺元素，留下持久的印象。
在這篇文章中，我們將深入瞭解CSS影象造型的世界，探索許多技術和屬性，將你的網頁設計技能提升到新的高度。
- 如何在HTML中新增圖片
- 響應式影象樣式設計
- 使用object-fit屬性來保持長寬比並避免縮水
- 用CSS建立圓角影象
- 用CSS建立圓形影象
- 用CSS將影象居中
- 建立透明的影象
- 在影象上放置文字
- 翻轉影象：建立映象效果
- 為影象新增過濾器：增強視覺效果
- 在影象上建立懸停覆蓋層
如何在HTML中新增圖片
在設定影象樣式之前，首先要將其新增到HTML文件中。為此，您可以使用 <img> 標記。 <img> 標記是一個自結束標記（不需要結束標記）。它有一個 src 屬性，用於指定要顯示的影象的URL或檔案路徑。
<img src="image.jpg" alt="Description of the image">
你也可以提供一個絕對的URL或一個相對的檔案路徑給圖片。
<img src="https://source.unsplash.com/tMHAmxLyzvA" alt="Boston city skyline">
alt 屬性代表替代文字，對於輔助功能至關重要。<img> 標記還提供了兩個可選屬性： width 和 height。這些屬性允許您以畫素為單位指定影象的尺寸。
<img src="image.jpg" alt="Description of the image">
然而，一般建議避免使用 width 和 height 屬性，除非你需要保持特定的影象尺寸。相反，你可以使用CSS來控制影象的大小，在響應式設計中提供更多的靈活性。
img {
height: 200px;
width: 700px;
}
響應式影象樣式設計
對影象的 width 和 height 屬性應用特定的值可能會導致不理想的後果，比如壓縮或扭曲影象。如果指定的尺寸與影象的原始長寬比不匹配，這一點尤其真實。
壓縮影象
為了避免這些問題並保持適當的影象比例，這就是響應式影象造型發揮作用的地方。響應式影象樣式設計確保影象適應不同的螢幕尺寸，這對響應式網頁設計至關重要。
你可以通過使用 max-width 屬性來實現這一點，它限制了影象的最大寬度。
img {
max-width: 100%;
height: auto;
}
響應式影象
提示：當你把 width 和 max-width 設定為 100% 時，是有區別的。使用 width: 100% 可以讓影象拉伸或收縮以適應容器的寬度，而 max-width: 100% 可以確保影象不超過其原始尺寸，但仍可以縮小以適應容器。
你還可以使用媒體查詢來修改基於不同裝置斷點的影象樣式。媒體查詢允許你根據裝置的螢幕尺寸、方向和其他特徵來應用特定的CSS規則。比如說：
@media screen and (max-width: 600px) {
.my-image {
max-width: 50%;
}
}
使用object-fit屬性來保持長寬比並避免縮水
有時，你需要為一個影象指定一個特定的寬度和高度。在這種情況下，你可以利用CSS的 object-fit 屬性來控制影象在其指定尺寸內的行為。
object-fit 屬性可以讓你指定影象如何在其容器內適合，同時保持其長寬比。它可以取幾個值，比如說：
- fill: 這個值會拉伸或壓扁影象以完全適合其容器，可能會導致變形。
- contain: 這個值將影象按比例放大以適應容器，而不進行裁剪，保持長寬比。它確保整個影象在容器中是可見的，可能會導致空隙。
- cover: 這個值按比例縮放影象以覆蓋容器，同時保持長寬比。它可能會導致裁剪影象的邊緣，以確保它填滿整個容器。
- none: 這個值不應用任何縮放或裁剪，影象將保留其原始尺寸，可能會溢位容器。
流行的object-fit屬性樣式演示
下面是一個使用object-fit屬性屬性的例子：
img {
width: 300px;
height: 300px;
object-fit: cover;
}
用CSS建立圓角影象
給影象新增圓角可以使它們看起來更柔和，更有視覺吸引力。
使用CSS，你可以通過對影象應用 border-radius 屬性來輕鬆實現這種效果。
下面是如何製作圓角影象的：
img {
border-radius: 10px;
}
在上面的例子中，我們將 border-radius 屬性設定為 10px 。根據你的喜好調整這個值，以控制邊角的圓度。這個值可以使用你喜歡的單位，如rem、百分比等。
圓角影象
用CSS建立圓形影象
為了使你的影象成為完美的圓形，請將 border-radius 屬性與相等的寬度和高度尺寸結合起來。
下面是建立圓形影象的方法：
img {
border-radius: 50%;
width: 200px;
height: 200px;
}
在上面的例子中，border-radius 屬性被設定為 50% ，它通過使邊框曲線為影象寬度或高度的一半來建立一個圓。
注：width 和 height 屬性必須有相等的尺寸，以實現一個完美的圓形影象。
你也可以使用 clip-path 屬性。它使你能夠為一個元素定義一個剪裁路徑，創造出獨特的形狀。
下面是一個影象被剪成圓形的例子：
img {
clip-path: circle(50%);
width: 200px;
height: 200px;
}
用CSS將影象居中
在網頁設計中，將影象排列在其容器的中心是一種常見的做法。有許多方法可以實現這一點；其中一種方法是將影象的 display 屬性設定為 block，並應用 margin: 0 auto，這將使影象在其容器內水平居中。
img {
display: block;
margin: 0 auto;
width: 700px;
}
居中的影象
建立透明的影象
你可以使用CSS來應用所需的透明度效果，使影象透明。 opacity 屬性允許你控制一個元素的透明度水平，包括影象。
值為 1 代表完全不透明（完全可見），而 0 代表完全透明（完全不可見）。
img {
opacity: 0.5;
}
在上述程式碼中，影象的不透明度被設定為 0.5 ，形成了半透明的效果。你可以調整不透明度的值，以達到所需的透明度水平。
透明的影象
在影象上放置文字
在影象上放置文字可以創造出具有視覺吸引力和資訊量的設計。要把文字放在圖片上面，你可以使用CSS定位和 z-index 的組合。
這裡有一個例子：
// HTML
<div class="image-container">
<img src="https://source.unsplash.com/tMHAmxLyzvA" alt="Boston city skyline" >
<div class="image-text">Welcome to Kinsta</div>
</div>
// CSS
.image-container {
position: relative;
}
.image-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
color: white;
font-size: 20px;
font-weight: bold;
}
在上面的程式碼中， image-container div 作為影象和文字疊加的容器。 position: relative 屬性被應用到容器中以建立一個定位環境。然後， image-text 類被用於在容器中使用 position: absolute 來絕對定位文字，並使用 top 、 left 和 transform 屬性將其居中。 z-index 屬性確保文字出現在影象上方，你還可以用顏色、字型大小和字型重量進一步定製文字的外觀。
請注意，具體的定位值和造型可以根據你的設計偏好和要求來調整。
翻轉影象：建立映象效果
翻轉影象可以為你的網頁設計新增一個有趣的視覺元素。無論你是想創造一個映象效果，還是想垂直或水平地翻轉影象，CSS都提供了簡單的技術來實現這種效果。
水平翻轉
要水平翻轉一個影象，你可以使用變換屬性和 scaleX() 函式。 scaleX(-1) 值將影象沿水平軸翻轉。
img {
transform: scaleX(-1);
}
垂直翻轉
要垂直翻轉一個影象，你可以使用變換屬性和 scaleY() 函式。 scaleY(-1) 值將影象沿垂直軸翻轉。
img {
transform: scaleY(-1);
}
對角線翻轉
要建立一個對角線翻轉的效果，在 transform 屬性中結合 scaleX() 和 scaleY() 函式。
img {
transform: scaleX(-1) scaleY(-1);
}
在上面的程式碼中，影象將在水平和垂直方向上被映象，從而產生對角線翻轉的效果。
水平、垂直和對角線的影象翻轉。
Info. 使用CSS翻轉影象並不修改實際的影象檔案，它只是改變它在網頁上的顯示方式。如果你需要永久地翻轉影象，你必須使用編輯工具來編輯它。
為影象新增過濾器：增強視覺效果
濾波器可以改變影象的外觀和感覺，讓你創造獨特的視覺效果。CSS提供了一系列可以應用於影象的濾鏡屬性，使你可以調整亮度、對比度、飽和度等。
你可以使用 filter 屬性來給影象應用過濾器。這個屬性接受各種濾鏡功能，每一種都能改變影象的不同方面。
img {
filter: brightness(150%);
}
在上面的程式碼中， brightness(150%) 函式被應用於影象。這使影象的亮度增加了150%。
常用的濾鏡函式
下面是一些常用的濾鏡函式：
brightness(): 調整影象的亮度。contrast(): 修改影象的對比度。saturate(): 改變影象的飽和度。grayscale(): 將影象轉換為灰度。blur(): 對影象施加一個模糊效果。sepia(): 在影象上應用棕褐色調效果。
你可以嘗試使用不同的濾鏡功能和數值來實現所需的視覺效果。結合多個過濾器也可以產生更復雜的變換。
Info 不是所有的過濾器都支援所有的瀏覽器。在使用一個特定的過濾器之前，請使用caniuse.com等平臺檢查其在不同瀏覽器中的相容性。
在影象上建立懸停覆蓋層
圖片上的懸停覆蓋可以為你的網站帶來互動性和視覺趣味。當使用者在圖片上懸停時，可以應用一種覆蓋效果，如顏色覆蓋或文字說明。
CSS提供了幾種實現懸停覆蓋的技術；一種方法是使用CSS過渡。通過過渡元素的特定屬性，你可以在懸停在影象上時平滑地實現動畫變化。
// HTML
<div class="image-container">
<img src="image.jpg" alt="Description of the image">
<div class="overlay"></div>
</div>
// CSS
.image-container {
position: relative;
display: inline-block;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.3s ease;
}
.image-container:hover .overlay {
opacity: 1;
}
在上面的程式碼中，一個 .image-container 元素包裹著影象和一個 .overlay 元素。覆蓋最初是透明的（opacity: 0），覆蓋整個影象。當懸停在 .image-container 上時， .overlay 的不透明度過渡到 1 ，顯示出顏色覆蓋。
為了達到理想的視覺效果，你可以通過調整 background-color 和不透明度屬性來定製疊加。
小結
用CSS設計圖片，為你開闢了一個創造性的世界，使你可以增強網頁的視覺吸引力和互動性。
當你用CSS設計圖片時，要始終牢記可訪問性、響應性和效能。
你最常使用的CSS影象樣式是什麼？你最感興趣的是哪一個？請在評論中告訴我們。
評論留言