Css 简明教程

CSS - Styling Images

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

Table of Contents

How Style an Image in CSS?

  1. Setting the Size: 在 CSS 中，可以使用 * height* 和 * width* 属性调整网页中的图像大小。

  2. Style the Border: 适当的边框厚度和颜色能使图像脱颖而出。在 CSS 中， * border* 属性可用于设置边框颜色、样式和厚度。

  3. Shadow Effect: * Adding a shadow effect around image using * box-shadow 属性可以增强图像样式。

  4. 鼠标悬停效果： 交互式样式，如鼠标悬停效果，当用户将鼠标悬停在图像上时更改图像外观。这可能包括更改不透明度、大小（使用转换），或应用滤镜。

  5. 响应式设计： 若要呈现多个图像，可以使用 flex 或网格布局系统，并可以使用媒体查询根据用户的屏幕宽度调整布局。

Set Image Dimensions

height 和 width 属性用于设置图像的尺寸。这些属性的值可以使用长度单位（像素、em）或百分比。

  1. 像素值： 以像素为单位设置尺寸

  2. 百分比值： 占据父级元素尺寸的百分比。

  3. Value 'auto': 允许保持图像的原始纵横比。

Example

以下示例展示如何设置图像的尺寸。

<html>
<head>
</head>
    <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 Image Opacity

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

不透明度值可以从 0.0 （完全透明）到 1.0 （完全不透明）不等。

Example

这是一个示例：

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

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

Example

本示例展示如何在 CSS 中添加滤镜

<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 Image Shadow Effect

在 CSS 中， * box-shadow* 属性用于在图像周围添加阴影效果。

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

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

Example

在此示例中，我们将创建正阴影和负阴影。

<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 Image As Background

CSS 允许将图像设置为 div、span、body、段落等其他元素的背景。

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

Example

在此示例中，我们为 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 Image Border

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

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

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

Example

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

<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 Image As Border

CSS 还允许使用 * border-image* 属性将图像设为其他元素（如 div、span、正文、段落等）的边框。

Example

在此示例中，我们为 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>

Position Text in an Image

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

首先，我们需要将图像容器的位置属性设置为 position: relative ，并将文本的位置属性设置为 position: absolute 。现在，你可以使用 * top* 、 * left* 、 * right* 和 * bottom* 属性来定位文本元素。

Example

<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 Image Object Fit

  • object-fit* 属性指定如果图像未保持其宽高比，则如何调整图像大小。此属性将图像调整为适合其容器。

Example

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

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

Center an Image

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

  1. justify-content: center: 这将使图像水平居中

  2. align-items: center: 这将使图像垂直居中

Example

在此示例中，我们使用 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>

Image Hover Overlay Effect

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

Example

以下示例显示了两种叠加效果和翻转效果。

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