Css 简明教程

CSS - Style Image

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

In this tutorial, we will learn about how to style an image to change its shape, size, and layout by using different CSS properties such as padding, borders, height, width, margins, etc.

CSS Style Image - Rounded Images

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

The following example demonstrates how to use border-radius: 20px property to create rounded border image −

<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%* 属性创建圆形图像 −

The following example demonstrates how to use border-radius: 50% property to create circle shaped image −

<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* 属性创建缩略图 −

The following example demonstrates how to create thumbnail image using the border property −

<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

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

The following example demonstrates how to create a thumbnail image as a link. To create a link, wrap an anchor tag around the image tag −

<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

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

The following example demonstrates how the images will automatically resize to match the screen size −

<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

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

The following example demonstrates how the image will resize to match the screen size, when the screen size is changed −

<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

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

The following example demonstrates a responsive polaroid-styled image with a shadow effect −

<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 之间的某个值。

The following example demonstrates how to create a transparent image by using the opacity property. The opacity property can be set to a value between 0 and 1.

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

The opacity of "img1" is set to 0.4, making it more transparent, while "img2" is set to 0.8, making it less transparent.

<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* 属性对图像应用的不同滤镜效果 −

he following example demonstrates the different filter effects that can be applied to an image using filter property −

<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

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

The following example demonstrates that different filter effects are applied to an image using ** property −

<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

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

The following example demonstrates that an image with fade in overlay effect shows text when you hover over the image −

<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

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

The following example demonstrates that slide-in overlay effect from the top of an image that shows text when you hover over the image −

<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)* 属性翻转图像 −

You can flip an image when you hover over it using the transform: scaleX(-1) property −

<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

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

The following example demonstrates how to create a responsive image gallery that will adjust the image sizes based on the size of the browser window −

<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 隐藏。当单击图像时，模态窗口会打开，显示相同的图像 −

The following example demonstrates how to create a simple modal using an image, where the modal is hidden using the property display: none. When the image is clicked, the modal window opens up showing the same image −

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