CSS 基础教程：图片（三）

hudson 译原文

CSS 图片透明度

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

透明度值可以在 0.0（完全透明）到 1.0（完全不透明）之间。

添加不同透明度后，同一图像看起来如下：

在这里插入图片描述

以下是示例：

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

CSS 图像滤镜

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

同样的效果也可以应用于图像。

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

blur(<length>): 使图像模糊。示例 = blur(5px)
brightness(<number>|<percentage>): 调整图像的亮度。示例 = brightness(0.5|30%)
contrast(<number>|<percentage>): 调整图像的对比度。示例 = contrast(50%)
grayscale(<number>|<percentage>): 将图像转换为灰度图像。示例 = grayscale(80%)
hue-rotate(<angle>|<zero>): 应用色调旋转。示例 = hue-rotate(80deg)
drop-shadow(offsetx offsety blur-radius color): 为图像添加阴影效果。示例 = drop-shadow(3px 5px 10px red)
opacity(<number>|<percentage>): 调整图像的透明度。示例 = opacity(0.4)
invert(<number>|<percentage>): 颠倒元素的颜色，使其呈现反色值。示例 = invert(20%)
saturate(<number>|<percentage>): 调整图像的饱和度。示例 = saturate(0.8)
sepia(<number>|<percentage>): 对元素应用深褐色效果，使其呈现出复古的褐色调。示例 = sepia(50%)

可以组合任意数量的这些函数来调整图像的渲染。渲染效果遵循传递值的顺序。

以下是一个示例：

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

CSS 图片阴影效果

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

一个 box shadow 由相对于元素的水平和垂直偏移、模糊和扩散半径以及颜色描述。以下是 box-shadow 的语法：

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

该属性可以具有以下值：

inset：可选关键字，用于设置阴影是内部还是外部的。如果未指定 inset，阴影将位于外部。
horizontal：必需，用于设置阴影从框的水平距离。
vertical：必需，用于设置阴影从框的垂直距离。
blur radius：可选。它是一个长度值。该值越大，模糊程度越高，阴影就会变得更大、更轻。不允许负值。如果未指定，将为 0（阴影的边缘是锐利的）。
spread：可选。设置阴影的扩散距离。正长度使阴影比其元素更大，负长度使其更小。如果未指定，将为 0（阴影将与元素大小相同）。
color：参考颜色值以获取可能的关键字和符号。如果未指定，将默认为 currentcolor。

示例：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>图片阴影</h2>
   <div>
      <h3>图像上的盒阴影：无</h3>
      <img class="img1" src="images/scenery2.jpg" alt="无滤镜">
   </div>
   <div>
      <h3>图像上的盒阴影</h3>
      <img class="img2" src="images/scenery2.jpg" alt="无滤镜">
   </div>
   <div>
      <h3>图像上的盒阴影：负值</h3>
      <img class="img3" src="images/scenery2.jpg" alt="无滤镜">
   </div>
</body>
</html>