CSS 设置图像样式

学习如何使用 CSS 设置图像样式。

圆角图像

使用 border-radius 属性创建圆形图像：

Mga Halimbawa

圆角图像:

img {
  border-radius: 8px;
}

亲自试一试

Mga Halimbawa

圆形图像：

img {
  border-radius: 50%;
}

亲自试一试

缩略图图像

使用 border 属性创建缩略图。

缩略图：

Kape

Mga Halimbawa

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}
<img src="paris.jpg" alt="Paris">

亲自试一试

作为链接的缩略图：

Mga Halimbawa

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>

亲自试一试

响应式图像

响应式图像会自动调整以适合屏幕尺寸。

如果您希望根据需要缩小图像，但需要杜绝放大到大于原始尺寸，请添加如下代码：

Mga Halimbawa

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

亲自试一试

提示：在我们的 CSS RWD 教程 中学习更多关于响应式 Web 设计的知识。

居中图像

如需使图像居中，请将左右外边距设置为 auto 并将其设置为块元素：

Kape

Mga Halimbawa

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

亲自试一试

宝丽来图片 / 卡片

Tulip

黄郁金香

Tulip

红郁金香

Mga Halimbawa

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;
}

亲自试一试

Transparent Image

opacity Ang range ng halaga ng attribute na ito ay 0.0 - 1.0. Ang mas mababa ang halaga, mas malambot ang transparency:

Tulip

opacity 0.2

Tulip

opacity 0.5

Tulip

opacity 1 (default)

Mga Halimbawa

img {
  opacity: 0.5;
}

亲自试一试

Image Text

Kung paano ilokalisahin ang teksto sa loob ng imahe:

Mga Halimbawa

Logo ng CodeW3C.com
Bottom Left
Top Left
Top Right
Bottom Right
Centered

Subukan ninyo ang mga ito sa sarili:

Top Left Top Right Bottom Left Bottom Right Center

Image Filters

CSS filter Ang attribute na ito ay nagdagdag ng epekto sa visual (tulad ng blur at saturation) sa elemento.

Babala:Ang Internet Explorer o Edge 12 ay hindi sumusuporta sa attribute ng filter.

Mga Halimbawa

Baguhin ang kulay ng lahat ng imahe sa puti at black (100% gray):

img {
  filter: grayscale(100%);
}

亲自试一试

提示：Bisita namin ang aming CSS Filters Reference Manual，makikita ang mas maraming impormasyon tungkol sa CSS filters.

Image Hover Overlay

Makagawa ng overlay effect sa mouse hover:

Example 1

Fade In Text:

Avatar
Hello World

亲自试一试

Example 2

Fade In Box:

Avatar
Bill

亲自试一试

Example 3

Slide In (Up):

Avatar
Hello World

亲自试一试

Example 4

Slide In (Down):

Avatar
Hello World

亲自试一试

Example 5

Slide In (Left):

Avatar
Hello World

亲自试一试

Example 6

Slide In (Right):

Avatar
Hello World

亲自试一试

Ibalik sa likuran ang imahe

Ilipat ang mouse sa ibabaw ng imahe:

Palaruanang Parke

Mga Halimbawa

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

亲自试一试

Responsive Image Gallery

Maaari naming gumawa ng adaptive image gallery gamit ang CSS.

Ang kasong ito ay gumagamit ng media query upang icalayo ang mga imahe sa iba't ibang laki ng screen. Ayusin ang laki ng window ng browser ninyo upang makita ang epekto:

Mga Halimbawa

.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 显示模态窗口并在模态内部显示图像：

Luntiang Lusog

亲自试一试