CSS 图片样式

本文通过一些实例带您了解如何使用 CSS 设置图片样式。

圆角图片

使用 border-radius 属性创建圆角图片：

圆角图片：

img {
  border-radius: 8px;
}

圆形或椭圆形图片：

img {
  border-radius: 50%;
}

缩略图

使用 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>

响应式图片

响应式图片将自动调整以适应屏幕尺寸。

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

max-width: 100%; 可以让元素不被放大到超过自己的最大宽度。如果你希望图片最大宽度完全跟随父元素，改成 width: 100%; 即可。

图片居中

要使图片居中，可将其设为 block 元素并将左右边距设置为 auto。

居中的图片：

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

图片卡片

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 属性设置图片的不透明度。 opacity 属性取值范围为 0.0 - 1.0 之间的值，值越小，越透明。

img {
  opacity: 0.5;
}

图片过滤器

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

!! 注意： Internet Explorer 或 Edge 12 不支持过滤器属性。

将所有图片的颜色更改为黑白（100% 灰色）：

img {
  filter: grayscale(100%);
}

翻转图片

将鼠标移到图片上：

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

响应式图片库

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

// 获取关闭按钮元素
var span = document.getElementsByClassName("close")[0];

// 赋予关闭按钮点击事件：隐藏模态窗口
span.onclick = function () {
  modal.style.display = "none";
};