Css 简明教程

CSS - Styling Images

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

CSS provides several properties to style images in a HTML webpages. In this tutorial we will learn how to style any type of image using CSS properties.

How Style an Image in CSS?

Setting the Size: In CSS, height and width properties can be used to adjust size of images in a webpage.
Style the Border: Borders with right thickness and color make image stand out. In CSS, border property can be used to set border color, style and thickness.
Shadow Effect: * Adding a shadow effect around image using *box-shadow property enhances image style.
*Hover Effect: * Interactive styling like hover effect change the appearance of image when user hover the mouse over images. This can include changes in opacity, size (using transforms), or applying filters.
*Responsive Design: * To render multiple images you can use flex or grid layout systems and by using media query you can adjust layout based on user’s screen width.

Set Image Dimensions

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

The height and width property is used to set the dimensions for an image. These properties can have a value in length(pixels, em) or percentage.

*Pixel Value: * Set dimensions in pixels
*Percentage Value: * Percentage of parents elements dimensions to occupy.
Value 'auto': Allows to maintain original aspect ratio of image.

Example

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

Here is an example shows how to set dimensions for an image.

<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* 属性用于调整元素的透明度。

The opacity property in CSS is used to adjust the transparency of an element.

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

The opacity value can range from 0.0 (completely transparent) to 1.0 (completely opaque).

Example

这是一个示例：

Here is an 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 属性用于将视觉效果应用于元素，例如模糊、反转颜色、调整亮度和对比度，或应用灰度等滤镜。

The filter property in CSS is used to apply visual effects to an element, such as blurring, inverting colors, adjusting brightness and contrast, or applying filters like grayscale.

Example

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

This example show how to add filter in 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* 属性用于在图像周围添加阴影效果。

In CSS, the box-shadow property used to add shadow effect around images.

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

A box shadow is described by horizontal and vertical offsets relative to the element, blur and spread radius, and color. Following is the syntax of box-shadow:

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

Example

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

In this example we will create positive and negative shadows.

<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、段落等其他元素的背景。

CSS allows an image to be set as a background for another element like div, span, body, paragraph etc.

background-image* 属性用于设置一张或多张图像作为背景。

The background-image property is used to set one or more than one image as a background.

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

Note: You can add multiple images as background. You just need to separate the images using comma.

Example

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

In this example we set background image for 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* 属性用于为图像的边框设置样式（实线或虚线）、粗细和颜色。

The border property is used to set style(solid or dashed), thickness and color for border of an image.

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

The border-radius property in CSS is used to define the rounded corners for border of an image. By adjusting the border-radius value, you can control the degree of roundness for each corner of an element or make them fully circular.

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

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

Here is an example that shows how to add border to an image.

<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、正文、段落等）的边框。

CSS also allows to set images as borders for other element like div, span, body, paragraph etc using border-image property .

Example

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

In this example we set border image for 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* 属性可用于将文本定位在图像内的不同位置。

In CSS position property can be used to position text in different locations inside an image.

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

First we need to set position property for image container as position: relative and position property of text as position: absolute. Now you can position of text elements using top, left, right and bottom properties.

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* 属性指定如果图像未保持其宽高比，则如何调整图像大小。此属性将图像调整为适合其容器。

The object-fit property specifies how the image should be resized if its aspect ratio is not maintained. This property resizes an image to fit in its container.

Example

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

Here is an example that shows how to use this property.

<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 布局。

There are several way to center an image inside a container, most popular way is to use flex layout with justify-content and align-items properties.

justify-content: center: This will center image horizontally
align-items: center: This will center image vertically

Example

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

In this example we used flex layout to center an image

 <!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 属性来实现此目的。

CSS allows to create Overlay effect images when hovered over them. We achieve this using transform property.

Example

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

Following example shows two overlay effect and flip effect.

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

Css 简明教程

CSS - Styling Images

Table of Contents

How Style an Image in CSS?

Set Image Dimensions

Example

CSS Image Opacity

Example

CSS Image Filter

Example

CSS Image Shadow Effect

Example

CSS Image As Background

Example

CSS Image Border

Example

CSS Image As Border

Example

Position Text in an Image

Example

CSS Image Object Fit

Example

Center an Image

Example

Image Hover Overlay Effect

Example