CSS 樣式化圖片
瞭解如何使用 CSS 樣式化圖片。
圓角圖片
使用 border-radius 屬性建立圓角圖片
縮圖
使用 border 屬性建立縮圖。
縮圖
示例
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
<img src="paris.jpg" alt="Paris">
自己動手試一試 »
縮圖作為連結
示例
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
img:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
<a href="paris.jpg">
<img src="paris.jpg" alt="Paris">
</a>
自己動手試一試 »
響應式圖片
響應式圖片將自動適應螢幕大小。
調整瀏覽器視窗大小以檢視效果
如果你希望圖片在必要時縮小，但其尺寸永不大於原始尺寸，請新增以下內容
提示：在我們的 CSS RWD 教程 中瞭解更多關於響應式 Web 設計的資訊。
居中圖片
要居中圖片，請將左右外邊距設定為 auto 並將其設為 塊級 元素
寶麗來圖片 / 卡片
五漁村
北極光
示例
div.polaroid {
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
img {width: 100%}
div.container {
text-align: center;
padding: 10px 20px;
}
自己動手試一試 »
透明圖片
opacity 屬性可以取值 0.0 - 1.0。值越低，透明度越高
opacity 0.2
opacity 0.5
opacity 1
(預設)
影像文字
如何在圖片中放置文字
影像濾鏡
CSS filter 屬性為元素新增視覺效果（如模糊和飽和度）。
注意： Internet Explorer 或 Edge 12 不支援 filter 屬性。
提示：前往我們的 CSS filter 參考 瞭解更多關於 CSS filters 的資訊。
圖片懸停疊加
懸停時建立疊加效果
翻轉圖片
將滑鼠移到圖片上
響應式圖片庫
CSS 可用於建立圖片庫。本例使用媒體查詢在不同螢幕尺寸下重新排列圖片。調整瀏覽器視窗大小以檢視效果
在此處新增圖片的描述
在此處新增圖片的描述
在此處新增圖片的描述
在此處新增圖片的描述
示例
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and (max-width: 700px){
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px){
.responsive {
width: 100%;
}
}
自己動手試一試 »
提示：在我們的 CSS RWD 教程 中瞭解更多關於響應式 Web 設計的資訊。
圖片模態框（高階）
這是一個演示 CSS 和 JavaScript 如何協同工作的示例。
首先，使用 CSS 建立一個模態視窗（對話方塊），並將其預設隱藏。
然後，當用戶單擊圖片時，使用 JavaScript 顯示模態視窗並在模態框內顯示圖片
示例
// 獲取模態框
var modal = document.getElementById('myModal');
// 獲取圖片並將其插入模態框 - 使用其“alt”文字作為標題
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// 獲取關閉模態框的 <span> 元素
var span = document.getElementsByClassName("close")[0];
// 當用戶點選 <span> (x) 時，關閉模態框
span.onclick = function() {
modal.style.display = "none";
}
自己動手試一試 »
× ![]()
