图像是强大的工具，可以增强网页的设计、沟通和用户体验。尽管不建议包含大量图像，但仔细选择和放置图像可以极大地促进网站的成功。

有多种 CSS 属性可用于设置图像样式。

  • height:设置图像的高度。

  • width:设置图像的宽度。

  • border:设置图像的边框。

  • border-radius:设置图像角的圆度。

  • opacity:设置图像的透明度级别。

  • object-fit:指定在以下情况下应如何调整图像大小:不保持其纵横比。

  • object-position:用于在其容器中定位被替换的元素，例如图像。

  • filter:对图像应用视觉效果，例如模糊或调整亮度。

  • box-shadow:向图像添加阴影效果。

  • background-image:指定用作元素背景的图像。

  • border-image:设置图像作为元素的边框。

  • image-orientation:设置图像的方向。

  • image-rendering:设置图像缩放算法。

  • image-resolution:定义单位长度的图像像素数。

CSS 图像高度

height属性用于设置图像的高度。该属性可以具有长度或百分比值。

这里是一个示例 -

<html>
<head>
</head>
<body>
   <h2>图像的高度</h2>
   <div>
      <p>用长度表示高度 - 300px</p>
      <img style="height: 300px;"  src="/css/images/orange-flower.jpg" alt="orange-flower">
   </div>
   <div>
      <p>用百分比表示高度 - 30%</p>
      <img style="height: 30%;"  src="/css/images/orange-flower.jpg" alt="orange-flower">
   </div>
   <p>Height - auto</p>
      <img style="height: auto;"  src="/css/images/orange-flower.jpg" alt="orange-flower">
   </div>
</body>
</html>

CSS 图像宽度

图像的宽度属性用于设置图像的宽度。该属性可以有长度或百分比值。

下面是一个示例:

<html>
<head>
</head>
<body>
   <h2>图像的宽度</h2>
   <div>
      <p>用长度表示宽度 - 300px</p>
      <img style="width: 300px;"  src="/css/images/pink-flower.jpg" alt="pink-flower">
   </div>
   <div>
      <p>用百分比表示宽度 - 30%</p>
      <img style="width: 30%;"  src="/css/images/pink-flower.jpg" alt="pink-flower">
   </div>
   <div>
      <p>Width - auto</p>
      <img style="width: auto;"  src="/css/images/pink-flower.jpg" alt="pink-flower">
   </div>
</body>
</html>

CSS 图像边框

图像的边框属性用于为图像设置边框。请参阅 border 属性。

这里是一个示例:

<html>
<head>
</head>
<body>
   <h2>Image Border</h2>
   <div>
      <img style="border: 10px inset black; margin-bottom=5px;" src="/css/images/white-flower.jpg" alt="white-flower">
      <img style="border: 10px dashed red;" src="/css/images/white-flower.jpg" alt="white-flower">
   </div>
</body>
</html>

CSS 图像边框半径

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

border-radius 可以具有以下值:

  • length:任意长度值，例如px、pt、em等。

  • 百分比（%）:任意百分比值，如30%、50%、5%等。

  • initial:设置border-radius值的初始值。

  • inherit:从父元素继承 border-radius 的值。

border-radius 是以下内容的简写:

  • border-top-left-radius

  • border-top-right-radius

  • border-bottom-right-radius

  • border-bottom-left-radius

注意:border-radius允许为1，一个声明中包含两个、三个或全部四个值。

这里是一个示例:

<html>
<head>
<style>
   img {
      border: 2px solid black; margin-bottom: 5px; height: 200px;
   }
</style>
</head>
<body>
   <h2>Image Border Radius</h2>
   <div>
      <img style="border-radius: 40px 60px;" src="/css/images/white-flower.jpg" alt="white-flower">
   </div>
   <div>
      <img style="border-radius: 50%;" src="/css/images/red-flower.jpg" alt="red-flower">
   </div>
   <div>
      <img style="border-top-left-radius: 50%;" src="/css/images/pink-flower.jpg" alt="pink-flower">
   </div>
   <div>
      <img style="border-bottom-right-radius: 2em;" src="/css/images/orange-flower.jpg" alt="orange-flower">
   </div>
</body>
</html>

CSS 图像不透明度

CSS 中的不透明度属性用于调整元素的透明度。它允许您控制图像的透明度或不透明程度。

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

这里是一个示例:

<html>
<head>
<style>
   img {
      border: 2px solid black; margin-bottom: 5px; height: 200px;
   }
</style>
</head>
<body>
   <h2>Image Opacity</h2>
   <div>
      <img style="opacity: 0.2;" src="/css/images/red-flower.jpg" alt="opacity 0.2">
   </div>
   <div>
      <img style="opacity: 0.5;" src="/css/images/red-flower.jpg" alt="opacity 0.5">
   </div>
   <div>
      <img style="opacity: 1;" src="/css/images/red-flower.jpg" alt="opacity 1">
   </div>
</body>
</html>

CSS Object-fit

Object-fit属性指定如果不保持图像的纵横比，应如何调整图像的大小。此属性调整图像大小以适合其容器。

此属性可以具有以下值之一:

  • contain:宽高比被维持。内容按比例缩放以适应容器的尺寸，而无需裁剪。

  • cover:可以裁剪内容以保持宽高比。内容按比例缩放以填充容器的尺寸。

  • fill:拉伸内容以适合容器的尺寸，忽略纵横比。

  • none:内容按其原始大小显示，不进行任何缩放或裁剪。

  • scale-down:内容显示为未指定或包含。当内容小于容器的尺寸时，它将按比例缩小以适应。如果它更大，它将表现为包含。

这是一个示例:

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

CSS 图像位置

属性 object-position 用于在其容器中定位被替换的元素，例如图像。

object-position 属性可以具有以下值:

  • <position>:根据以下值之一定义元素的 2D 位置 - top、bottom、left、right、center。

  • <length-percentagenotransR:任何长度或百分比值。示例:50px, 30%

  • initial:设置对象位置的初始值。

  • inherit:继承该值其父元素的对象位置。

这里是一个示例:

<html>
<head>
<style>
   article {
      margin: 0.5rem;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr));
      gap: 0.5rem;
   }
   .img-container {
      width: 20ch;
      border: 1ch solid #71a589;
      background: orange;
   }
   img {
      width: 100%;
      display: block;
      object-fit: none;
   }
   .image-1 {
      object-position: 50% 50%;
   }
   .image-2 {
      object-position: left bottom;
   }
   .image-3 {
      object-position: 20% 80%;
   }
   .image-4 {
      object-position: 40px 60px;
   }
   .image-5 {
      object-position: right 75%;
   }
   .image-6 {
      object-position: 10px center;
   }
</style>
</head>
<body>
   <h2>Image Object Position</h2>
   <article>
      <div class="container">
         <h3>1. Default Value</h3>
         <div class="img-container">
            <img class="image-1" src="/css/images/scenery2.jpg" />
         </div>
      </div>
      <div class="container">
         <h3>2. object-position: left bottom;</h3>
         <div class="img-container">
            <img class="image-2" src="/css/images/scenery2.jpg" />
         </div>
      </div>
      <div class="container">
         <h3>3. object-position: 20% 80%;</h3>
         <div class="img-container">
            <img class="image-3" src="/css/images/scenery2.jpg" />
         </div>
      </div>
      <div class="container">
         <h3>4. object-position: 40px 60px;</h3>
         <div class="img-container">
            <img class="image-4" src="/css/images/scenery2.jpg" />
         </div>
      </div>
      <div class="container">
         <h3>5. object-position: right 75%;</h3>
         <div class="img-container">
            <img class="image-5" src="/css/images/scenery2.jpg" />
         </div>
      </div>
      <div class="container">
         <h3>6. object-position: 10px center;</h3>
         <div class="img-container">
            <img class="image-6" src="/css/images/scenery2.jpg" />
         </div>
      </div>
   </article>
</body>
</html>

CSS 图像过滤器

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

对于图像也可以实现相同的效果。

filter 属性接受各种指定要应用的特定效果的函数和值。以下是一些常用的函数:

  • blur(<length>):使图像模糊。示例=blur(5px)

  • brightness(<number>|<percentagenotransR):调整图像的亮度。示例=亮度(0.5|30%)

  • contrast(<number>|<percentagenotransR):调整图像的对比度。示例 =对比度(50%)

  • grayscale(<number>|<percentagenotransR):将图像转换为灰度图像。示例 = 灰度（80%）

  • hue-rotate(<angle>|<zero>):应用色调旋转。示例=hue-rotate(80deg)

  • drop-shadow(offsetx offsety Blu-radius color):为图像添加阴影效果。示例 = drop-shadow(3px 5px 10px red)

  • opacity(<number>|<percentage>):调整图像的透明度。示例 = opacity(0.4)

  • invert(<number>|<percentage>):反转元素的颜色，使其显示反转的颜色值。示例 = invert(20%)

  • saturate(<number>|<percentagenotransR):调整图像的饱和度。示例 = saturate(0.8)

  • sepia(<number>|<percentagenotransR):对元素应用棕褐色效果，使其呈现复古的棕色色调。示例 = sepia(50%)

您可以组合任意数量的这些函数来调整图像的渲染。您传递值所遵循的顺序将在图像渲染中遵循。

这里是一个示例:

<html>
<head>
</head>
<body>
   <h2>Filter Image</h2>
   <div>
      <h3>No Filter</h3>
      <img style="object-fit: none;" src="/css/images/scenery2.jpg" alt="No filter">
   </div>
   <div>
      <h3>Filter blur</h3>
      <img style="object-fit: none; filter: blur(5px);" src="/css/images/scenery2.jpg" alt="filter blur">
   </div>
   <div>
      <h3>Filter grayscale</h3>
      <img style="object-fit: none; filter: grayscale(80%);" src="/css/images/scenery2.jpg" alt="filter grayscale">
   </div>
   <div>
      <h3>Filter saturate</h3>
      <img style="object-fit: none; filter: saturate(40%);" src="/css/images/scenery2.jpg" alt="filter saturate">
   </div>
</body>
</html>

CSS 图像阴影效果

CSS 提供了一个属性 box-shadow，有助于向元素（例如图像）添加阴影效果。

盒子阴影是通过相对于元素的水平和垂直偏移、模糊和扩散来描述的半径和颜色。以下是 box-shadow 的语法:

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

该属性可以有以下值:

  • inset:它是一个可选关键字，设置阴影位于元素内部还是外部。如果未指定 inset，阴影将位于外部。

  • horizontal:需要设置阴影距框的水平距离。

  • vertical:需要设置阴影距框的垂直距离。

  • blur-radius :可选。它是一个长度值。该值越大，模糊越大，因此阴影变得更大、更亮。不允许使用负值。如果未指定，则为 0（阴影边缘锐利）。

  • spread:可选。设置阴影传播的距离。正长度使阴影大于其元素，负长度使其小于其元素。如果未指定，则为 0（阴影与元素大小相同）。

  • color: 如果未指定，则默认为当前颜色。

示例: box-shadow(10px 10px 20px #3300FF)

这里是一个示例: 
<html>
<head>
<style>
   .img1{
      object-fit: none;
      box-shadow: none
   }
   .img2{
      object-fit: none;
      box-shadow: 40px 40px 10px rgb(247, 174, 187);
   }
   .img3{
      object-fit: none;
      box-shadow: -40px 40px 10px rgb(247, 174, 187);
   }
</style>
</head>
<body>
   <h2>Image Shadow</h2>
   <div>
      <h3>Box shadow on image: None</h3>
      <img class="img1" src="/css/images/scenery2.jpg" alt="No filter">
   </div>
   <div>
      <h3>Box shadow on image</h3>
      <img class="img2" src="/css/images/scenery2.jpg" alt="No filter">
   </div>
   <div>
      <h3>Box shadow on image:negative value</h3>
      <img class="img3" src="/css/images/scenery2.jpg" alt="No filter">
   </div>
</body>
</html>

CSS 图像作为背景

CSS 允许使用图像设置为另一个元素的背景。可用于此目的的属性是background-image。

background-image 属性将一张或多张图像设置为背景。

它可以具有以下值:

  • none:指定不设置任何图像作为背景。

  • <image>:要设置的图像的 URL

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

这里是一个示例:

<html>
<head>
<style>
   body {
      background-color: beige;
      background-image: url(/css/images/logo.png);
   }
</style>
</head>
<body>
</body>
</html>

CSS 图像属性: 总结

以下是 CSS 属性列表样式图像:

序号属性和描述
1heigth

设置高度图像。

2width

设置图像的宽度。

3border

设置图像的边框。

4图像效果

为图像设置不同的效果，如模糊、亮度、对比度等

5image-orientation

确定显示或图像的方向。

6image-rendering

控制浏览器如何渲染图像。

7background-image

定义指向要放置在元素背景中的图像资源的指针。

8border-image

此属性允许您添加图像作为元素周围的边框。

9opacity

它允许您控制图像的透明度或不透明程度。

10object-fit

指定图像应如何调整大小，如果其不保持宽高比

11object-position

用于在其容器中定位被替换的元素，例如图像。

12box-shadow

它有助于向元素（例如图像）添加阴影效果.

13border-radius

它定义元素边框的圆角，例如图像。