加入收藏 | 设为首页
我要投稿

小码哥的IT人生

首页 > Web前端 > css3基础

CSS 图像样式 详解

css3基础 2022-05-23 12:07:59小码哥的IT人生shichen

CSS 图像样式

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

圆角图像

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

示例代码：

圆角图像:

img {
  border-radius: 8px;
}

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<style>
img {
  border-radius: 8px;
}
</style>
</head>
<body>
<h1>圆角图像</h1>
<p>请使用 border-radius 属性来创建圆角图像：</p>
<img src="/i/photo/tulip.jpg" alt="Tulip" width="300" height="300">
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

示例代码：

圆形图像：

img {
  border-radius: 50%;
}

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<style>
img {
  border-radius: 50%;
}
</style>
</head>
<body>
<h1>圆角图像</h1>
<p>请使用 border-radius 属性创建圆形的图像：</p>
<img src="/i/photo/tulip.jpg" alt="Tulip" width="300" height="300">
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

 

缩略图图像

使用 border 属性创建缩略图。

缩略图：

Coffee

示例代码：

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

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<style>
img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}
</style>
</head>
<body>
<h1>缩略图</h1>
<p>请使用 border 属性来创建缩略图：</p>
<img src="/i/photo/tulip.jpg" alt="Tulip" style="width:150px">
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

作为链接的缩略图：

示例代码：

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>

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<style>
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);
}
</style>
</head>
<body>
<h1>作链接的缩略图</h1>
<p>请使用 border 属性创建缩略图。用锚包围图像以将其用作链接。</p>
<p>请把鼠标悬停在图像上，然后单击以查看效果。</p>
<a target="_blank" href="paris.jpg">
  <img src="/i/photo/tulip.jpg" alt="Tulip" style="width:150px">
</a>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

 

响应式图像

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

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

示例代码：

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

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<style>
img {
  max-width: 100%;
  height: auto;
}
</style>
</head>
<body>
<h1>响应式图像</h1>
<p>自适应图像将自动调整以适合屏幕尺寸。</p>
<p>请调整浏览器窗口的大小以查看效果：</p>
<img src="/i/logo/w3logo-2.png" alt="phpcodeweb" width="800" height="450">
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

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

居中图像

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

Coffee

示例代码：

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

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<style>
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
</style>
</head>
<body>
<h1>居中图像</h1>
<p>如需对图像进行居中，请把左右外边距设置为 auto，并转为块元素。</p>
<img src="/i/photo/tulip.jpg" alt="Tulip" style="width:50%">
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

宝丽来图片 / 卡片

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

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<style>
body {margin:25px;}
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);
  margin-bottom: 25px;
}
div.container {
  text-align: center;
  padding: 10px 20px;
}
</style>
</head>
<body>
<h1>响应式宝丽来图像 / 卡片</h1>
<div class="polaroid">
  <img src="/i/photo/tulip-yellow.jpg" alt="Tulip" style="width:100%">
  <div class="container">
  <p>黄色郁金香</p>
  </div>
</div>
<div class="polaroid">
  <img src="/i/photo/tulip-red.jpg" alt="Tulip" style="width:100%">
  <div class="container">
  <p>红色郁金香</p>
  </div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

透明图像

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

Tulip

opacity 0.2

Tulip

opacity 0.5

Tulip

opacity 1（默认）

示例代码：

img {
  opacity: 0.5;
}

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<style>
img {
  opacity: 0.5;
}
</style>
</head>
<body>
<h1>图像透明度</h1>
<p>opacity 属性规定元素的透明度。值越低，越透明：</p>
<p>50% 不透明度的图像：</p>
<img src="/i/photo/tulip-red.jpg" alt="Tulip" width="600" height="400">
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

图像文本

如何在图像中定位文本：

示例代码：

phpcodeweb Logo
Bottom Left
Top Left
Top Right
Bottom Right
Centered

亲自试一试：

 

完整实例【左上】：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}
.topleft {
  position: absolute;
  top: 8px;
  left: 16px;
  font-size: 18px;
}
img {
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>
<h1>图像文本</h1>
<p>在图像左上角添加一些文本：</p>
<div class="container">
  <img src="/i/logo/w3logo-2.png" alt="phpcodeweb" width="800" height="450">
  <div class="topleft">Top Left</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【右上】：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}
.topright {
  position: absolute;
  top: 8px;
  right: 16px;
  font-size: 18px;
}
img {
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>
<h1>图像文本</h1>
<p>在图像右上角添加一些文本：</p>
<div class="container">
  <img src="/i/logo/w3logo-2.png" alt="phpcodeweb" width="800" height="450">
  <div class="topright">Top Right</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【左下】：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}
.bottomleft {
  position: absolute;
  bottom: 8px;
  left: 16px;
  font-size: 18px;
}
img {
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>
<h1>图像文本</h1>
<p>在图像左下角添加一些文本：</p>
<div class="container">
  <img src="/i/logo/w3logo-2.png" alt="phpcodeweb" width="800" height="450">
  <div class="bottomleft">Bottom Left</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【右下】：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}
.bottomright {
  position: absolute;
  bottom: 8px;
  right: 16px;
  font-size: 18px;
}
img {
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>
<h1>图像文本</h1>
<p>在图像右下角添加一些文本：</p>
<div class="container">
  <img src="/i/logo/w3logo-2.png" alt="phpcodeweb" width="800" height="450">
  <div class="bottomright">Bottom Right</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【居中】：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}
.center {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 18px;
}
img {
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>
<h1>图像文本</h1>
<p>居中图像中的文本：</p>
<div class="container">
  <img src="/i/logo/w3logo-2.png" alt="phpcodeweb" width="800" height="450">
  <div class="center">Centered</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

 

图像滤镜

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

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

示例代码：

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

img {
  filter: grayscale(100%);
}

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 33%;
  height: auto;
  float: left;
  max-width: 235px;
}
.blur {filter: blur(4px);}
.brightness {filter: brightness(250%);}
.contrast {filter: contrast(180%);}
.grayscale {filter: grayscale(100%);}
.huerotate {filter: hue-rotate(180deg);}
.invert {filter: invert(100%);}
.opacity {filter: opacity(50%);}
.saturate {filter: saturate(7);}
.sepia {filter: sepia(100%);}
.shadow {filter: drop-shadow(8px 8px 10px green);}
</style>
</head>
<body>
<p><b>注释：</b>Internet Explorer 或 Edge 12 不支持 filter 属性。</p>
<img src="/i/photo/tulip.jpg" alt="Pineapple" width="300" height="300">
<img class="blur" src="/i/photo/tulip.jpg" alt="Pineapple" width="300" height="300">
<img class="brightness" src="/i/photo/tulip.jpg" alt="Pineapple" width="300" height="300">
<img class="contrast" src="/i/photo/tulip.jpg" alt="Pineapple" width="300" height="300">
<img class="grayscale" src="/i/photo/tulip.jpg" alt="Pineapple" width="300" height="300">
<img class="huerotate" src="/i/photo/tulip.jpg" alt="Pineapple" width="300" height="300">
<img class="invert" src="/i/photo/tulip.jpg" alt="Pineapple" width="300" height="300">
<img class="opacity" src="/i/photo/tulip.jpg" alt="Pineapple" width="300" height="300">
<img class="saturate" src="/i/photo/tulip.jpg" alt="Pineapple" width="300" height="300">
<img class="sepia" src="/i/photo/tulip.jpg" alt="Pineapple" width="300" height="300">
<img class="shadow" src="/i/photo/tulip.jpg" alt="Pineapple" width="300" height="300">
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

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

图像悬停叠加

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

实例 1

淡入文本：

Avatar
Hello World

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
  width: 50%;
}
.image {
  display: block;
  width: 100%;
  height: auto;
}
.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}
.container:hover .overlay {
  opacity: 1;
}
.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h1>淡入文本</h1>
<div class="container">
  <img src="/i/css/avatar.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

实例 2

淡入框：

Avatar
Bill

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
  width: 50%;
}
.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}
.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)
}
.container:hover .image {
  opacity: 0.3;
}
.container:hover .middle {
  opacity: 1;
}
.text {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}
</style>
</head>
<body>
<h1>淡入框</h1>
<div class="container">
  <img src="/i/css/avatar.png" alt="Avatar" class="image" style="width:100%">
  <div class="middle">
    <div class="text">Bill Gates</div>
  </div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

实例 3

滑入（上）：

Avatar
Hello World

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
  width: 50%;
}
.image {
  display: block;
  width: 100%;
  height: auto;
}
.overlay {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}
.container:hover .overlay {
  bottom: 0;
  height: 100%;
}
.text {
  white-space: nowrap;
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h1>滑入（从上）</h1>
<div class="container">
  <img src="/i/css/avatar.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

实例 4

滑入（下）：

Avatar
Hello World

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
  width: 50%;
}
.image {
  display: block;
  width: 100%;
  height: auto;
}
.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}
.container:hover .overlay {
  height: 100%;
}
.text {
  white-space: nowrap;
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h1>滑入（从下）</h1>
<div class="container">
  <img src="/i/css/avatar.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

实例 5

滑入（左）：

Avatar
Hello World

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
  width: 50%;
}
.image {
  display: block;
  width: 100%;
  height: auto;
}
.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease;
}
.container:hover .overlay {
  width: 100%;
}
.text {
  white-space: nowrap;
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h1>滑入（从左）</h1>
<div class="container">
  <img src="/i/css/avatar.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

实例 6

滑入（右）：

Avatar
Hello World

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
  width: 50%;
}
.image {
  display: block;
  width: 100%;
  height: auto;
}
.overlay {
  position: absolute;
  bottom: 0;
  left: 100%;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease;
}
.container:hover .overlay {
  width: 100%;
  left: 0;
}
.text {
  white-space: nowrap;
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h1>滑入（从右）</h1>
<div class="container">
  <img src="/i/css/avatar.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

 

翻转图像

请把鼠标移到图像上：

体育公园

示例代码：

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

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<style>
div.gallery {
  border: 1px solid #ccc;
}
div.gallery:hover {
  border: 1px solid #777;
}
div.gallery img {
  width: 100%;
  height: auto;
}
div.desc {
  padding: 15px;
  text-align: center;
}
* {
  box-sizing: border-box;
}
.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%;
  }
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
</style>
</head>
<body>
<h1>响应式图片库</h1>
<h2>请调整窗口大小来查看效果。</h2>
<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="/i/photo/tulip-yellow.jpg">
      <img src="/i/photo/tulip-yellow.jpg" alt="黄色郁金香" width="600" height="400">
    </a>
    <div class="desc">在此处添加图像描述</div>
  </div>
</div>
<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="/i/photo/tulip-red.jpg">
      <img src="/i/photo/tulip-red.jpg" alt="红色郁金香" width="600" height="400">
    </a>
    <div class="desc">在此处添加图像描述</div>
  </div>
</div>
<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="/i/photo/flower-1.jpg">
      <img src="/i/photo/flower-1.jpg" alt="花花草草" width="600" height="400">
    </a>
    <div class="desc">在此处添加图像描述</div>
  </div>
</div>
<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="/i/photo/flower-2.jpg">
      <img src="/i/photo/flower-2.jpg" alt="花花草草" width="600" height="400">
    </a>
    <div class="desc">在此处添加图像描述</div>
  </div>
</div>
<div class="clearfix"></div>
<div style="padding:6px;">
  <p>本例使用媒体查询来重新排列不同屏幕尺寸的图像：对于宽于 700 像素的屏幕，它将并排显示四幅图像；对于小于 700 像素的屏幕，将并排显示两幅图像。对于小于 500 像素的屏幕，图像将垂直堆叠（100％）。</p>
  <p>您稍后将在我们的 CSS 教程中学到有关媒体查询和响应式 Web 设计的更多知识。</p>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

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

图像模态（Image Modal）

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

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

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

绿茵场

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<style>
#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 1500px;
}
/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}
/* Add Animation */
.modal-content, #caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}
@keyframes zoom {
  from {transform: scale(0.1)}
  to {transform: scale(1)}
}
/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}
.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}
</style>
</head>
<body>
<h1>图像模态</h1>
<p>在此例中，我们使用 CSS 创建默认情况下隐藏的模式（对话框）。</p>
<p>我们使用 JavaScript 触发模态，并在单击模态时在模态内显示当前图像。还请注意，我们将图像的“alt”属性中的值用作模态内的图像标题文本。</p>
<p>如果您无法立即理解代码，请不要担心。学习完 CSS 后，请转到我们的 JavaScript 教程学习更多相关知识。</p>
<img id="myImg" src="/i/photo/tiyugongyuan.jpg" alt="绿茵场" style="width: 50%;">
<!-- The Modal -->
<div id="myModal" class="modal">
  <span class="close">×</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
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;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

相关阅读

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
 ICP备案号：苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024