CSS 图像样式

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

圆角图像

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

实例

圆角图像:

  1. img {
  2.   border-radius: 8px;
  3. }

css_ex_images_round.htm

实例

圆形图像：

  1. img {
  2.   border-radius: 50%;
  3. }

css_ex_images_circle.htm

缩略图图像

使用 border 属性创建缩略图。

缩略图：

实例

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

css_ex_images_thumbnail.htm

作为链接的缩略图：

实例

  1. img {
  2.   border: 1px solid #ddd;
  3.   border-radius: 4px;
  4.   padding: 5px;
  5.   width: 150px;
  6. }
  8. img:hover {
  9. box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
  10. }
  12. <a href="paris.jpg">
  13.   <img src="paris.jpg" alt="Paris">
  14. </a>

css_ex_images_thumbnail_link.htm

响应式图像

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

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

实例

  1. img {
  2.   max-width: 100%;
  3.   height: auto;
  4. }

trycss_ex_images_responsive.htm

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

居中图像

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

实例

  1. img {
  2.   display: block;
  3.   margin-left: auto;
  4.   margin-right: auto;
  5.   width: 50%;
  6. }

css_ex_images_center.htm

宝丽来图片 / 卡片

实例

  1. div.polaroid {
  2.   width: 80%;
  3.   background-color: white;
  4.   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  5. }
  7. img {width: 100%}
  9. div.container {
  10.   text-align: center;
  11.   padding: 10px 20px;
  12. }

css_ex_images_card.htm

透明图像

opacity 属性的取值范围为 0.0 - 1.0。值越低，越透明：

实例

  1. img {
  2.   opacity: 0.5;
  3. }

css_image_opacity.htm

图像文本

如何在图像中定位文本：

实例

Cingue Terre
左下
左上
右上
右下
居中

实例：

左上 右上 左下 右下 居中

图像滤镜

CSS filter 属性把视觉效果（如模糊和饱和度）添加到元素。

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

实例

把所有图像的颜色更改为黑白（100％ 灰色）：

  1. img {
  2.   filter: grayscale(100%);
  3. }

css_ex_images_filters.htm

提示：请访问我们的 CSS 滤镜参考手册，了解有关 CSS 滤镜的更多信息。

图像悬停叠加

创建鼠标悬停时的叠加效果：

实例 1

淡入文本：

css_css_image_overlay_fade.htm

实例 2

淡入框：

css_css_image_overlay_opacity.htm

实例 3

滑入（上）：

css_css_image_overlay_slidetop.htm

实例 4

滑入（下）：

css_css_image_overlay_slidebottom.htm

实例 5

滑入（左）：

css_css_image_overlay_slideleft.htm

实例 6

滑入（右）：

css_css_image_overlay_slideright.htm

翻转图像

实例

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

trycss_image_flip.htm

响应式图库

我们可以使用 CSS 创建自适应的图片库。

本例使用媒体查询来重新排列不同屏幕尺寸的图像。请调整浏览器窗口的大小以查看效果：

实例

  1. .responsive {
  2.   padding: 0 6px;
  3.   float: left;
  4.   width: 24.99999%;
  5. }
  7. @media only screen and (max-width: 700px){
  8.   .responsive {
  9.     width: 49.99999%;
  10.     margin: 6px 0;
  11.   }
  12. }
  14. @media only screen and (max-width: 500px){
  15.   .responsive {
  16.     width: 100%;
  17.   }
  18. }

css_image_gallery_responsive.htm

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

图像模态（Image Modal）

这是一个演示 CSS 和 JavaScript 如何协同工作的例子。

首先，请使用 CSS 创建模态窗口（对话框），并默认将其隐藏。

然后，当用户单击图像时，使用 JavaScript 显示模态窗口并在模态内部显示图像：

实例

  1. // 获取模态
  2. var modal = document.getElementById('myModal');
  4. // 获取图像并将其插入模式中 - 使用它的“alt” 文字作为标题
  5. var img = document.getElementById('myImg');
  6. var modalImg = document.getElementById("img01");
  7. var captionText = document.getElementById("caption");
  8. img.onclick = function(){
  9.   modal.style.display = "block";
  10.   modalImg.src = this.src;
  11.   captionText.innerHTML = this.alt;
  12. }
  14. // 获取关闭 modal 的 <span> 元素
  15. var span = document.getElementsByClassName("close")[0];
  17. // 当用户点击 <span>(x) 时，关闭 modal
  18. span.onclick = function() {
  19.   modal.style.display = "none";
  20. }

css_image_modal_js.htm