在 css 中使背景图像变暗-ag捕鱼王app官网

当前位置：ag捕鱼王app官网 > > web前端 > css >

vue react javascript angular css html

在 css 中使背景图像变暗

作者：迹忆客最近更新：2023/03/13 浏览次数：

在本文中，我们将介绍几种在 css 中使背景图像变暗的方法。

在 css 中使用线性渐变使背景图像变暗

我们可以使用 css linear gradient 在 css 中使背景图像变暗。linear-gradient() 函数创建具有线性渐变的背景。线性渐变是至少两种不同颜色之间的平滑过渡。该函数采用无数的颜色参数。我们可以将梯度的方向设置为第一个参数。方向的选项是 to right、to left、to bottom right、90deg 等。我们可以将线性渐变应用于背景图像并设置较暗的颜色和不透明度以使背景图像变暗。我们可以使用 linear-gradient() 函数中的 rgba() 函数来设置颜色。在这里，我们只会使背景图像变暗，而不会使其他元素变暗。

例如，在 css 中选择容器并使用 background 速记属性来设置线性渐变和背景图像。编写 linear-gradient() 函数并将两个色标设为 rgba(0, 0, 0, 0.7)。接下来，使用函数设置你选择的背景图像。使用各种背景属性将图像正确放置在背景中。将 background-position 设置为 center，将 background-repeat 设置为 no-repeat，将 background-size 设置为 cover。将高度设置为 100%。确保选择 body 和 html 标签并将高度设置为 100%，边距设置为 0。

在下面的示例中，我们使用 rgba(0, 0, 0, 0.7) 作为两个色标。函数 rgba(0, 0, 0) 等于黑色。第四个值是不透明度的值。接近 1 的值使其更暗，反之亦然。我们可以根据需要调整不透明度值，使背景图像变暗。这样，我们就可以在 css 中使用线性渐变来使背景图像变暗。

示例代码：

<div id="background">div>

body, html {
    height: 100%;
    margin: 0;
}
#background {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://loremflickr.com/320/240');
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

在 css 中使用 `background-blend-mode` 属性使背景图像变暗

我们可以使用 background-blend-mode 属性来使 css 中的背景图像变暗。该属性设置背景的混合模式。此属性有多种选择。一些选项是 normal、multiply、darken、lighten, saturation 等。我们可以使用变暗选项使背景图像更暗。我们可以使用 rgba() 函数设置背景图像的颜色。

例如，在 css 中选择 background id 并使用 background 属性设置颜色和背景图像。将颜色设置为 rgba(0, 0, 0, 0.7) 并在函数中使用占位符图像。使用与第一种方法不同的背景属性来正确设置图像。接下来，使用 background-blend-mode 属性并将其设置为 darken。

通过这种方式，我们可以使用 background-blend-mode 属性使背景图像变暗。

示例代码：

#background {
    background: rgba(0, 0, 0, 0.7) url('https://loremflickr.com/320/240');
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: darken;
}

<div id="background">div>

上一篇：在 css 中仅在底部设置框阴影

下一篇：在 css 中的一个元素中使用多个类

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

发布时间：2023/04/28 浏览次数：133 分类：css

本文介绍的是著名的 css ui 框架 bootstrap。我们将讨论使用自定义样式覆盖 bootstrap css 的过程。

使用 css 制作带圆角的 html 表格

发布时间：2023/04/28 浏览次数：245 分类：css

这个简短的文章是关于在 html 页面上制作圆角表格的 css 样式。使用 css 制作带圆角的 html 表格使图像、表格或 div 段的角变圆的属性是 border-radius。

css 设置轮廓 outline 的半径

发布时间：2023/04/28 浏览次数：140 分类：css

在本文中，用户将学习如何为 outline 属性设置圆角，与 border-radius 属性相同。在这里，我们已经解释了将圆角应用于轮廓属性的不同方法。

发布时间：2023/04/28 浏览次数：265 分类：css

在本文中，用户将学习仅使用 css 将

使用 css 居中内联块

发布时间：2023/04/28 浏览次数：118 分类：css

在本文中，我们将创建多个 html 元素并将其显示设置为 inline-block。之后，我们将学习使用 display: inline-block 将所有元素居中。

使用 css 添加透明边框

发布时间：2023/04/28 浏览次数：525 分类：css

在本文中，我们将讨论在 html 中的图像、按钮或任何其他对象周围创建透明边框。透明边框是图像或对象周围的边框，可改善用户体验。

发布时间：2023/04/28 浏览次数：704 分类：css

有时，在开发网页时，我们将文本放在底部或页脚中，因此我们可能需要在文本下方留一个空格并将文本上移。我们将学习如何使用 css 从网页底部向上移动文本。

发布时间：2023/04/28 浏览次数：233 分类：css

本文提供了使用 css、javascript 和 jquery 使文本闪烁的详细说明。

css 防止文本选择

发布时间：2023/04/28 浏览次数：81 分类：css

在本文中，我们讨论了防止文本选择和使用具有 none 值的 user-select 属性。此外，您还将了解如何为不同的 web 浏览器使用该属性。

在 css 中使背景图像变暗-ag捕鱼王app官网