課程表

CSS 基礎教程

CSS 中級教程

CSS3 高級教程

CSS 響應式設計

CSS 網格教程

CSS 實例

CSS 實例

CSS 測驗

CSS 測驗

CSS 參考手冊

選修課

課程推薦：

CodeW3C.com 百寶箱

CSS 設置圖像樣式

上一頁 CSS 工具提示
下一頁 CSS object-fit

學習如何使用 CSS 設置圖像樣式。

圓角圖像

使用 border-radius 屬性創建圓形圖像：

實例

圓角圖像:

img {
  border-radius: 8px;
}

親自試一試

實例

圓形圖像：

img {
  border-radius: 50%;
}

親自試一試

縮略圖圖像

使用 border 屬性創建縮略圖。

縮略圖：

Coffee

實例

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>

親自試一試

響應式圖像

響應式圖像會自動調整以適合屏幕尺寸。

如果您希望根據需要縮小圖像，但需要杜絕放大到大于原始尺寸，請添加如下代碼：

實例

img {
  max-width: 100%;
  height: auto;
}

親自試一試

提示：在我們的 CSS RWD 教程中學習關于響應式 Web 設計的更多知識。

居中圖像

如需使圖像居中，請將左右外邊距設置為 auto 并將其設置為塊元素：

Coffee

實例

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

親自試一試

寶麗來圖片 / 卡片

Tulip

黃色郁金香

Tulip

紅色郁金香

實例

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。值越低，越透明：

Tulip

opacity 0.2

Tulip

opacity 0.5

Tulip

opacity 1（默認）

實例

img {
  opacity: 0.5;
}

親自試一試

圖像文本

如何在圖像中定位文本：

實例

Bottom Left

Top Left

Top Right

Bottom Right

Centered

親自試一試：

左上右上左下右下居中

圖像濾鏡

CSS filter 屬性把視覺效果（如模糊和飽和度）添加到元素。

注意：Internet Explorer 或 Edge 12 不支持 filter 屬性。

實例

把所有圖像的顏色更改為黑白（100％灰色）：

img {
  filter: grayscale(100%);
}

親自試一試

提示：請訪問我們的 CSS 濾鏡參考手冊，了解有關 CSS 濾鏡的更多信息。

圖像懸停疊加

創建鼠標懸停時的疊加效果：

實例 1

淡入文本：

Hello World

親自試一試

實例 2

淡入框：

Bill

親自試一試

實例 3

滑入（上）：

Hello World

親自試一試

實例 4

滑入（下）：

Hello World

親自試一試

實例 5

滑入（左）：

Hello World

親自試一試

實例 6

滑入（右）：

Hello World

親自試一試

翻轉圖像

請把鼠標移到圖像上：

體育公園

實例

img:hover {
  transform: scaleX(-1);
}

親自試一試

響應式圖庫

我們可以使用 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 設計的更多知識。

圖像模態（Image Modal）

這是一個演示 CSS 和 JavaScript 如何協同工作的例子。

首先，請使用 CSS 創建模態窗口（對話框），并默認將其隱藏。

然后，當用戶單擊圖像時，使用 JavaScript 顯示模態窗口并在模態內部顯示圖像：

綠茵場

親自試一試

上一頁 CSS 工具提示
下一頁 CSS object-fit