数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何使用 CSS 使图像变暗？
要使用 CSS 使图像变暗，我们将讨论三种不同的方法。在本文中，我们将了解如何使用 CSS 属性和方法（例如叠加半透明层）来对图像应用变暗效果。
本文中有一个图像，我们的任务是使用 CSS 使图像变暗。我们将显示变暗前后的图像。
使用 CSS 使图像变暗的方法
以下是使用 CSS 使图像变暗的方法列表，我们将在本文中逐步骤进行解释并提供完整的示例代码。
使用 filter 属性使图像变暗
要使用 CSS 使图像变暗，我们将使用 filter 属性调整图像的亮度。
- 我们使用了 img 标签两次，一次插入图像，一次显示变暗后的图像。
- 然后，我们使用 CSS 的 height 和 width 属性设置输出图像的尺寸。
- 我们使用 "filter: brightness(50%);" 通过 filter 属性设置图像的亮度值，从而使图像变暗。
示例
这是一个完整的示例代码，实现了上述步骤，使用 CSS 的 filter 属性使图像变暗。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Darken Image using CSS filter property
</title>
<style>
.darken-image {
filter: brightness(50%);
height: 65px;
width: 350px;
}
</style>
</head>
<body>
<h3>
To Darken an Image Using CSS
</h3>
<p>
In this example we have used <strong>filter
</strong>property to darken an Image using
CSS.
</p>
<h4>
Original Image:
</h4>
<img src="/html/images/test.png">
<h4>
Darkened Image:
</h4>
<div class="darken-image">
<img src="/html/images/test.png">
</div>
</body>
</html>
使用 opacity 属性使图像变暗
在这种方法中，要使用 CSS 使图像变暗，我们将使用 ::after 伪元素创建叠加层，使图像变暗。::after 伪元素会在图像顶部添加一层。
- 我们在 darken-image 类中使用了 "position: relative;"，以便叠加层相对于父 div 定位，而不是整个页面。
- 我们在 ::after 伪元素中使用了 "position: absolute;"，以便叠加层放置在图像上，覆盖整个图像，通过设置 top、left、height 和 width 的 CSS 属性来实现。
- 我们使用了 ""background-color: black" 和 opacity，它们一起在图像上创建了一个变暗的叠加层。
示例
这是一个完整的示例代码，实现了上述步骤，使用 CSS 的 opacity 属性使图像变暗。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Darken Image using CSS filter property
</title>
<style>
.darken-image {
position: relative;
display: inline-block;
}
.darken-image::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.5;
}
</style>
</head>
<body>
<h3>
To Darken an Image Using CSS
</h3>
<p>
In this example we have used <strong>opacity
</strong> property with background-color to
darken the image using CSS.
</p>
<h4>
Original Image:
</h4>
<img src="/html/images/test.png">
<h4>
Darkened Image:
</h4>
<div class="darken-image">
<img src="/html/images/test.png">
</div>
</body>
</html>
使用线性渐变叠加使图像变暗
在这种方法中，我们将使用 linear-gradient 创建叠加层，使图像变暗。
- 我们使用了 darken-image 类，它使用 CSS 线性渐变和 rgba 属性创建了 0.5 不透明度的黑色叠加效果。
- 该 url 将图像放置在线性渐变的后面。
- 最后，我们使用 CSS 的 height 和 width 属性设置了变暗后的图像尺寸。
示例
这是一个完整的示例代码，实现了上述步骤，使用 linear-gradient 叠加使图像变暗。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Darken Image using CSS filter property
</title>
<style>
.darken-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)),
url("/html/images/test.png");
height: 65px;
width: 350px;
}
</style>
</head>
<body>
<h3>
To Darken an Image Using CSS
</h3>
<p>
In this example we have used <strong>background
-image</strong> with linear-gradient to darken
the Image using CSS.
</p>
<h4>
Original Image:
</h4>
<img src="/html/images/test.png">
<h4>
Darkened Image:
</h4>
<div class="darken-image"></div>
</body>
</html>
结论
要使用 CSS 使图像变暗，在本文中，我们了解了三种不同的方法，分别是使用 CSS 的 filter 属性、使用 opacity 属性和使用 linear-gradient 叠加。
更新于： 2024年9月4日
20K+ 浏览量
广告