CSS - 样式图像

上一页
下一页

CSS 提供了多种属性来设置 HTML 网页中图像的样式。在本教程中，我们将学习如何使用 CSS 属性设置任何类型图像的样式。

目录


 

如何在 CSS 中设置图像样式？

  • 设置大小：在 CSS 中，高度 和 宽度 属性可用于调整网页中图像的大小。
  • 设置边框样式：具有正确粗细和颜色的边框使图像脱颖而出。在 CSS 中，边框 属性可用于设置边框颜色、样式和粗细。
  • 阴影效果：使用 盒阴影 属性在图像周围添加阴影效果可以增强图像样式。
  • 悬停效果：交互式样式（如悬停效果）会在用户将鼠标悬停在图像上时更改图像的外观。这可能包括不透明度、大小（使用变换）的变化或应用滤镜。
  • 响应式设计：要呈现多个图像，您可以使用 flex 或 grid 布局系统，并使用媒体查询根据用户的屏幕宽度调整布局。

设置图像尺寸

高度 和 宽度 属性用于设置图像的尺寸。这些属性可以具有长度（像素、em）或百分比的值。

  • 像素值：以像素为单位设置尺寸
  • 百分比值：父元素尺寸的百分比以占据。
  • 值“auto”：允许保持图像的原始纵横比。

示例

这是一个示例，展示了如何设置图像的尺寸。

<!DOCTYPE html>
<html>
<body>
    <h2>Dimensions in length - 100px</h2>
    <img style="height: 100px; width: 100px;"  
         src="/css/images/orange-flower.jpg" 
         alt="orange-flower">

    <h2>Dimensions in percentage - 30%</h2>
    <!-- Occupy 30% height and width of body -->
    <img style="height: 30%; width: 30%;" 
         src="/css/images/orange-flower.jpg"  
         alt="orange-flower">

    <h2>Dimensions - auto</h2>
    <!-- Height adjusted in such a way that aspect
      ratio of image maintained for width 100px -->
    <img style="height: auto; width: 100px;"  
         src="/css/images/orange-flower.jpg" 
         alt="orange-flower">
</body>
</html>

CSS 图像不透明度

CSS 中的 不透明度 属性用于调整元素的透明度。

不透明度值可以介于 0.0（完全透明）和 1.0（完全不透明）之间。

示例

这是一个示例

<!DOCTYPE html>
<html>
<head>
    <style>
       img {
          border: 2px solid black; 
          height: 70px;
          width: auto
       }
    </style>
</head>
<body>
    <h3>Image Opacity 0.9</h3>
    <img style="opacity: 0.9;" 
         src="/css/images/red-flower.jpg" 
         alt="opacity 0.9">

    <h3>Image Opacity 0.5</h3>
    <img style="opacity: 0.5;" 
         src="/css/images/red-flower.jpg" 
         alt="opacity 0.5">
    
    <h3>Image Opacity 0.2</h2>
    <img style="opacity: 0.2;" 
         src="/css/images/red-flower.jpg" 
         alt="opacity 0.2">
</body>
</html>

CSS 图像滤镜

CSS 中的 filter 属性用于将视觉效果应用于元素，例如模糊、颜色反转、调整亮度和对比度，或应用灰度等滤镜。

示例

此示例演示如何在 css 中添加滤镜

<!DOCTYPE html>
<html>
<head>
    <style>
        img{
            height: 70px;
            width: auto;
        }
    </style>
</head>
<body>
    <h3>No Filter</h3>
    <img src="/css/images/scenery2.jpg">

    <h3>Filter blur</h3>
    <img style="filter: blur(5px);" 
         src="/css/images/scenery2.jpg" >

    <h3>Filter grayscale</h3>
    <img style="filter: grayscale(80%);" 
         src="/css/images/scenery2.jpg" >

    <h3>Filter saturate</h3>
    <img style="filter: saturate(40%);" 
         src="/css/images/scenery2.jpg" >
</body>
</html>

CSS 图像阴影效果

在 CSS 中，盒阴影 属性用于在图像周围添加阴影效果。

盒阴影由相对于元素的水平和垂直偏移量、模糊和扩展半径以及颜色来描述。以下是盒阴影的语法

img { 
    box-shadow: inset horizontal vertical
                blur-radius spread-color; 
}

示例

在这个例子中，我们将创建正阴影和负阴影。

<!DOCTYPE html>
<html>
<head>
    <style>
       img{
          object-fit: none;
          height: 50px;
          width: auto;
       }
       .img2{
          box-shadow: 20px 20px 10px 
                    rgb(247, 174, 187);
       }
       .img3{
          box-shadow: -20px 20px 10px 
                    rgb(247, 174, 187);
       }
    </style>
</head>
<body>
    <h3>Box shadow on image: None</h3>
    <img src="/css/images/scenery2.jpg">

    <h3>Box shadow on image</h3>
    <img class="img2" src="/css/images/scenery2.jpg">

    <h3>Box shadow on image:negative value</h3>
    <img class="img3" src="/css/images/scenery2.jpg">
</body>
</html>

CSS 图像作为背景

CSS 允许将图像设置为另一个元素（如 div、span、body、段落等）的背景。

背景图像 属性用于将一个或多个图像设置为背景。

注意：您可以添加多个图像作为背景。您只需使用逗号分隔图像即可。

示例

在此示例中，我们为 body 设置背景图像。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div{
            background-color: rgba(255, 255, 255);
            opacity: 70%;
            padding: 20px;
        }
        body {
            background-image: url(/css/images/logo.png);
            height: 350px;
        }
    </style>
</head>
<body>
    <div>
        <h1>Welcome to My Website</h1>
        <p>
            This is an example of setting a 
            background image using CSS
        </p>
    </div>
</body>
</html>

CSS 图像边框

边框 属性用于设置图像边框的样式（实线或虚线）、粗细和颜色。

CSS 中的 圆角 属性用于定义图像边框的圆角。通过调整 圆角 值，您可以控制元素每个角的圆润程度或使其完全圆形。

/* Sharp edged border */
img{
    border: 5px solid black; 
}

/* Round edged border */
img{
    border: 5px solid black; 
    border-radius: 5px;
}

/* Circular Border */
img{
    border: 5px solid black; 
    border-radius: 50%;
}

示例

这是一个示例，展示了如何在图像中添加边框。

<!DOCTYPE html>
<html>
<head>
    <style>
        img{
            border: 5px solid black; 
            margin-bottom: 5px;
            height: 100px;
            width: 100px;
        }
        .border-radius20{
            border-radius: 20px;
        }
        .border-radius50{
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <h4>Image Border</h4>
    <img src="/css/images/white-flower.jpg"
         alt="white-flower">

    <h4>Image Border Radius 20px</h4>
    <img src="/css/images/white-flower.jpg" 
         class="border-radius20"
         alt="white-flower">

    <h4>Image Border Radius 50%</h4>
    <img src="/css/images/white-flower.jpg" 
         class="border-radius50"
         alt="white-flower">
    </body>
</html>

CSS 图像作为边框

CSS 还允许使用 边框图像 属性将图像设置为其他元素（如 div、span、body、段落等）的边框。

示例

在此示例中，我们为 div 设置边框图像。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div{
            background-color: #f0f0f0;
            border: 20px solid transparent;
            border-image: url(/css/images/border.png) 40;
            padding: 20px;
        }
        body {
            height: 350px;
        }
    </style>
</head>
<body>
    <div>
        <h1>Welcome to My Website</h1>
        <p>
            This is an example of setting a 
            background image using CSS
        </p>
    </div>
</body>
</html>

在图像中定位文本

在 CSS 中，位置 属性可用于在图像内的不同位置定位文本。

首先，我们需要将图像容器的位置属性设置为 `position: relative`，并将文本的位置属性设置为 `position: absolute`。现在，您可以使用 顶部、左边、右边 和 底部 属性定位文本元素。

示例

<!DOCTYPE html>
<html>
<head>
    <style>
       .container {
          position: relative;
          border: 2px solid #ef2c2c;
       }
       .center {
          position: absolute;
          top: 45%;
          width: 100%;
          text-align: center;
       }
       .top-left {
          position: absolute;
          top: 12px;
          left: 30px;
       }
       .top-right {
          position: absolute;
          top: 12px;
          right: 30px;
       }
       .bottom-left {
          position: absolute;
          bottom: 12px;
          left: 30px;
       }
       .bottom-right {
          position: absolute;
          bottom: 12px;
          right: 30px;
       }
       img {
          width: 100%;
          opacity: 0.7;
       }
    </style>
</head>
<body>
   <div class="container">
      <img src="/css/images/red-flower.jpg" 
            width="1000px" height="350px">

      <h3 class="center">
         Text at Center
      </h3>
      <h3 class="top-left">
         Text at Top Left
      </h3>
      <h3 class="top-right">
         Text at Top Right
      </h3>
      <h3 class="bottom-left">
         Text at Bottom Left</h3>
      <h3 class="bottom-right">
         Text at Bottom Right
      </h3>
   </div>
</body>
</html>

CSS 图像对象适应

对象适应 属性指定如果图像的纵横比未保持，则应如何调整图像大小。此属性调整图像大小以适合其容器。

示例

这是一个示例，展示了如何使用此属性。

<!DOCTYPE html>
<html>
<head>
    <style>
       img {
          border: 2px solid black; 
          margin-bottom: 5px; 
          height: 200px; 
          width: 200px;
       }
    </style>
</head>
<body>
    <div>
        <h3>object-fit: fill</h3>
        <img style="object-fit: fill;" 
             src="/css/images/white-flower.jpg" 
             alt="object-fit: fill">
    </div>
    <div>
    <h3>object-fit: cover</h3>
    <img style="object-fit: cover;" 
         src="/css/images/white-flower.jpg" 
         alt="object-fit: cover">
    </div>
</body>
</html>

居中图像

有几种方法可以在容器内居中图像，最常用的方法是使用 flex 布局以及 justify-content 和 align-items 属性。

  • justify-content: center: 这将水平居中图像
  • align-items: center: 这将垂直居中图像

示例

在此示例中，我们使用 flex 布局居中图像

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .container {
            display: flex;          
            justify-content: center; 
            align-items: center;    
            height: 300px;           
            border: 2px solid black; 
        }

        img {
            max-width: 100%;        
            height: auto;         
            border: 1px solid;
        }
    </style>
</head>

<body>
    <div class="container">
        <img src="/css/images/logo.png">
    </div>
</body>
</html>

图像悬停覆盖效果

CSS 允许在将鼠标悬停在图像上时创建覆盖效果图像。我们使用 transform 属性实现此目的。

示例

以下示例显示了两种覆盖效果和翻转效果。

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

    .middle {
      transition: .5s ease;
      opacity: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%)
    }

    .container2:hover .image {
      opacity: 0.3;
    }

    .container2:hover .middle {
      opacity: 1;
    }

    .text2 {
      background-color: #4CAF50;
      color: white;
      font-size: 16px;
      padding: 16px 32px;
    }
    .imgg:hover {
      transform: scaleX(-1);
    }
    </style>
</head>
<body>
    <h2>Fade in Overlay</h2>
    <div class="container">
        <img src="/html/images/logo.png" 
            alt="Avatar" class="image">
        <div class="overlay">
            <div class="text">
                Hello World
            </div>
        </div>
    </div>

    <h2>Fade in a Box</h2>
    <div class="container2">
        <img src="/html/images/logo.png" 
            alt="Avatar" class="image">
        <div class="middle">
        <div class="text2">
            Sign In
        </div>
        </div>
    </div>

    <h2>Hover to Flip an Image</h2>
    <img src="/html/images/logo.png" 
        class="image imgg" >

</body>
</html>
打印页面

上一页
下一页
广告