Css 简明教程

CSS - Styling Images

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

How Style an Image in CSS?

Setting the Size: 在 CSS 中，可以使用 * height* 和 * width* 属性调整网页中的图像大小。
Style the Border: 适当的边框厚度和颜色能使图像脱颖而出。在 CSS 中， * border* 属性可用于设置边框颜色、样式和厚度。
Shadow Effect: * Adding a shadow effect around image using * box-shadow 属性可以增强图像样式。
鼠标悬停效果： 交互式样式，如鼠标悬停效果，当用户将鼠标悬停在图像上时更改图像外观。这可能包括更改不透明度、大小（使用转换），或应用滤镜。
响应式设计： 若要呈现多个图像，可以使用 flex 或网格布局系统，并可以使用媒体查询根据用户的屏幕宽度调整布局。

Set Image Dimensions

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

像素值： 以像素为单位设置尺寸
百分比值： 占据父级元素尺寸的百分比。
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、段落等其他元素的背景。

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

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

justify-content: center: 这将使图像水平居中
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>

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