CSS3 样式图像

创建于 2024-12-03 / 27
字体： [默认] [大] [更大]

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

圆角图像

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

Paris

实例

圆角图像:

img {
  border-radius: 8px;
} 亲自试一试 » Paris

实例

圆形图像:

img {
  border-radius: 50%;
} 亲自试一试 »

缩略图图像

使用 border 属性创建缩略图。

缩略图:

Paris

实例

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> 亲自试一试 »

响应式图像

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

Cinque Terre

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

实例

img {
  max-width: 100%;
  height: auto;
} 亲自试一试 »

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

居中图像

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

Paris

实例

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
} 亲自试一试 »

宝丽来图片 / 卡片

Cinque Terre

Cinque Terre

Norway

Northern Lights

实例

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

Forest

opacity 0.2

Forest

opacity 0.5

Forest

opacity 1
(default)

实例

img {
  opacity: 0.5;
} 亲自试一试 »

图像文本

如何在图像中定位文本:

实例

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

在线实例:

左上角 » 右上 » 左下角 » 右下 » 居中 »

图像滤镜

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

注释: Internet Explorer 或 Edge 12 不支持 filter 属性。

实例

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

img {
  filter: grayscale(100%);
} 亲自试一试 »

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

图像悬停叠加

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

实例

淡入文本:

Avatar Hello World 亲自试一试 »

实例

淡入框:

Avatar John 亲自试一试 »

实例

滑入（上）:

Avatar Hello World 亲自试一试 »

实例

滑入（下）:

Avatar Hello World 亲自试一试 »

实例

滑入（左）:

Avatar Hello World 亲自试一试 »

实例

滑入（右）:

Avatar Hello World 亲自试一试 »

翻转图像

请把鼠标移到图像上:

Paris

实例

img:hover {
  transform: scaleX(-1);
} 亲自试一试 »

响应式图库

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

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

Cinque Terre Add a description of the image here Forest Add a description of the image here Northern Lights Add a description of the image here Mountains Add a description of the image here

实例

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

Northern Lights, Norway

实例

// 获取模态
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;
}

// 获取关闭 modal 的 <span> 元素
var span = document.getElementsByClassName("close")[0];

// 当用户点击 <span>(x) 时，关闭 modal
span.onclick = function() {
  modal.style.display = "none";
} 亲自试一试 » ×

0 人点赞过