Css 简明教程

CSS - Style Image

在本教程中，我们将学习如何使用不同的 CSS 属性（例如填充、边框、高度、宽度、边距等）来设置图像样式以更改其形状、大小和布局。

CSS Style Image - Rounded Images

以下示例演示如何使用 * border-radius: 20px* 属性创建圆角边框图像 −

<html>
<head>
<style>
   img {
      width: 100px;
      height: 100px;
      border-radius: 20px;
   }
</style>
</head>
<body>
   <img src="images/pink-flower.jpg" alt="pink-flower">
</body>
</html>

CSS Style Image - Circle Images

以下示例演示如何使用 * border-radius: 50%* 属性创建圆形图像 −

<html>
<head>
<style>
   img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
   }
</style>
</head>
<body>
   <img src="images/pink-flower.jpg" alt="pink-flower">
</body>
</html>

CSS Style Image - Thumbnail Images

以下示例演示如何使用 * border* 属性创建缩略图 −

<html>
<head>
<style>
   img {
      border: 2px solid red;
      border-radius: 10px;
      padding: 5px;
      width: 150px;
   }
</style>
</head>
<body>
   <img src="images/pink-flower.jpg" alt="pink-flower" >
</body>
</html>

CSS Style Image - Thumbnail Images As Link

以下示例演示如何创建一个缩略图图像作为链接。要创建链接，请用锚标记包围图像标记 −

<html>
<head>
<style>
   img {
      border: 2px solid red;
      border-radius: 10px;
      padding: 5px;
      width: 150px;
   }
   img:hover {
      border: 2px solid blue;
      box-shadow: 0 0 5px 2px rgba(82, 241, 108, 0.5);
   }
</style>
</head>
<body>
   <a target="_blank" href="images/red-flower.jpg">
      <img src="images/pink-flower.jpg" alt="pink-flower">
   </a>
</body>
</html>

CSS Style Image - Responsive Images

以下示例演示图像如何自动调整大小以匹配屏幕大小 −

<html>
<head>
<style>
   img {
      max-width: 100%;
      width: 500px;
      height: 300px;
   }
</style>
</head>
<body>
   <p>Resize the browser window to see the effect.</p>
   <img src="images/pink-flower.jpg" alt="Pink Flower" >
</body>
</html>

CSS Style Image - Center an Image

以下示例演示当屏幕大小改变时，图像如何调整大小以匹配屏幕大小 −

<html>
<head>
<style>
   img {
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 40%;
      height: 200px;
   }
</style>
</head>
<body>
   <img src="images/pink-flower.jpg" alt="Pink Flower">
</body>
</html>

CSS Style Image - Polaroid Images / Cards

以下示例演示了一个带有阴影效果的反应式宝丽来风格图像 −

<html>
<head>
<style>
   .polaroid-image {
      width: 60%;
      height: 200px;
      background-color: white;
      box-shadow: 0 3px 6px 0 grey, 0 8px 16px 0 black;
      margin-bottom: 25px;
      margin: 20px;
   }
   img {
      width: 100%;
      height: 150px;
   }
   .box {
      text-align: center;
      padding: 5px;
   }
</style>
</head>
<body>
   <div class="polaroid-image">
      <img src="images/red-flower.jpg" alt="Flower">
      <div class="box">
         <p>Tree</p>
      </div>
   </div>
</body>
</html>

CSS Style Image - Transparent Image

以下示例演示如何使用 * opacity* 属性创建透明图像。不透明度属性可以设置为 0 到 1 之间的某个值。

"img1" 的不透明度设置为 0.4，使其更加透明，而 "img2" 设置为 0.8，使其不透明度降低。

<html>
<head>
<style>
   .img1 {
      opacity: 0.4;
      width: 170px;
      height: 100px;
   }
   .img2 {
      opacity: 0.8;
      width: 170px;
      height: 100px;
   }
</style>
</head>
<body>
   <img class="img1" src="images/tree.jpg" alt="Tree">
   <img class="img2" src="images/tree.jpg" alt="Tree">
</body>
</html>

CSS Style Image - Center The Text

以下示例演示了可以使用 * filter* 属性对图像应用的不同滤镜效果 −

<html>
<head>
<style>
   .box {
      display: flex;
      align-items: center;
      justify-content: center;
   }
   .center-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-40%, -40%);
      font-size: 30px;
      font-weight: bold;
      color: blue;
   }
   img {
      width: 100%;
      height: auto;
      opacity: 0.4;
      height: 250px;
   }
</style>
</head>
<body>
   <div class="box">
      <img src="images/tree.jpg" alt="Tree">
      <div class="center-text">Tree Image</div>
   </div>
</body>
</html>

CSS Style Image - Filters

以下示例演示使用 ** 属性对图像应用不同的滤镜效果 −

<html>
<head>
<style>
   img {
      width: 300px;
      height: 300px;
      height: auto;
      float: left;
      max-width: 235px;
   }
   .blur-img {
      filter: blur(3px);
   }
   .brightness-img {
      filter: brightness(220%);
   }
   .grayscale-img {
      filter: grayscale(110%);
   }
   .huerotate-img {
      filter: hue-rotate(120deg);
   }
   .invert-img {
      filter: invert(110%);
   }
   .shadow-img {
      filter: drop-shadow(6px 6px 8px red);
   }
   .saturate-img {
      filter: saturate(8);
   }
   .sepia-img {
      filter: sepia(110%);
   }
</style>
</head>
<body>
   <img class="blur-img" src="images/pink-flower.jpg" alt="Flower">
   <img class="brightness-img" src="images/pink-flower.jpg" alt="Flower">
   <img class="grayscale-img" src="images/pink-flower.jpg" alt="Flower">
   <img class="huerotate-img" src="images/pink-flower.jpg" alt="Flower">
   <img class="invert-img" src="images/pink-flower.jpg" alt="Flower">
   <img class="shadow-img" src="images/pink-flower.jpg" alt="Flower">
   <img class="saturate-img" src="images/pink-flower.jpg" alt="Flower">
   <img class="sepia-img" src="images/pink-flower.jpg" alt="Flower">
</body>
</html>

CSS Style Image - Fade In Overlay

以下示例演示带有淡入覆盖效果的图像在您将鼠标悬停在图像上时显示文本 −

<html>
<head>
<style>
   .img-container {
      position: relative;
      width: 250px;
   }
   .img-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      opacity: 0;
      transition: opacity 0.4s ease;
   }
   .overlay-text {
      color: red;
      font-weight: bold;
      font-size: 25px;
      position: absolute;
      top: 40%;
      left: 20%;
   }
   .img-container:hover .img-overlay {
      opacity: 1;
   }
   img {
      width: 100%;
      height: auto;
      display: block;
   }
</style>
</head>
<body>
   <div class="img-container">
      <div class="img-overlay">
         <div class="overlay-text">Tutorialspoint</div>
      </div>
      <img src="images/see.jpg" alt="See Image">
   </div>
</body>
</html>

CSS Style Image - Slide In Effect

以下示例演示从图像顶部出现的幻灯片覆盖效果在您将鼠标悬停在图像上时显示文本 −

<html>
<head>
<style>
   .img-container {
      position: relative;
      width: 250px;
      overflow: hidden;
   }
   .img-overlay {
      position: absolute;
      bottom: 100%;
      left: 0;
      background-color: violet;
      overflow: hidden;
      width: 100%;
      text-align: center;
      height: 100%;
      transition: 0.4s ease;
   }
   .img-container:hover .img-overlay {
      bottom: 0;
      height: 100%;
   }
   img {
      width: 100%;
      height: auto;
      display: block;
   }
</style>
</head>
<body>
   <div class="img-container">
      <div class="img-overlay">
      <p>CSS Image Slide In Effect</p>
      </div>
      <img src="images/pink-flower.jpg" alt="Flower Image">
   </div>
</body>
</html>

CSS Style Image - Flip an Image

当您将鼠标悬停在图像上时，您可以使用 * transform: scaleX(-1)* 属性翻转图像 −

<html>
<head>
<style>
   img {
      width: 200px;
      height: 200px;
   }
   img:hover {
      transform: scaleX(-1);
   }
</style>
</head>
<body>
   <img src="images/see.jpg" alt="See">
</body>
</html>

CSS Style Image - Responsive Image Gallery

以下示例演示如何创建响应式图像库，该库将根据浏览器窗口的大小调整图像大小 −

<html>
<head>
<style>
   .gallery {
      margin: 10px;
      overflow: hidden;
   }
   .gallery img {
      width: 20%;
      height: auto;
      float: left;
      margin: 5px;
      border: 2px solid black;
      transition: transform 0.4s ease;
   }
   @media screen and (max-width: 700px) {
      .gallery img {
         width: 48%;
      }
   }
   @media screen and (max-width: 1000px) {
      .gallery img {
         width: 30%;
      }
   }
</style>
</head>
<body>
   <h3>Resize the browser window to see the effect.</h3>
   <div class="gallery">
      <img src="images/tree.jpg" alt="Tree">
      <img src="images/orange-flower.jpg" alt="Orange">
      <img src="images/see.jpg" alt="See">
      <img src="images/red-flower.jpg" alt="Pink">
   </div>
</body>
</html>

CSS Style Image - Image Modal

以下示例演示如何使用图像创建简单的模态，其中模态使用属性 display: none 隐藏。当单击图像时，模态窗口会打开，显示相同的图像 −

<html>
<head>
<style>
   .main-img {
      width: 500px;
      height: 250px;
   }
   .modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: yellow;
   }
   .modal-img {
      display: block;
      margin: auto;
      width: 80%;
      height: 80%;
   }
   .close {
      position: absolute;
      top: 10px;
      right: 10px;
      margin: 5px;
      color: red;
      font-size: 25px;
      cursor: pointer;
   }
</style>
</head>
<body>
   <img src="images/red-flower.jpg" class="main-img" alt="red flower" onclick="openModal()">

   <div id="imgModal" class="modal" onclick="closeModal()">
      <span class="close">×</span>
      <img class="modal-img" src="images/red-flower.jpg" alt="Modal Image">
   </div>

   <script>
      function openModal() {
      document.getElementById("imgModal").style.display = "block";
      }

      function closeModal() {
      document.getElementById("imgModal").style.display = "none";
      }
   </script>
</body>
</html>