如何向背景图像添加模糊滤镜-之路教程

创建 HTML

首先创建一个具有“图像”类的 <div> 元素。
使用类名“text”创建另一个 <div> 元素。其中还要添加 <h1>、<h2> 和 <p> 元素。

<div class="image"></div>
<div class="text">
  <h1>onitroad</h1>
  <h2>Blurred Background Image</h2>
  <p>Snippet</p>
</div>

如何向背景图像添加模糊滤镜

在此代码中，我们可以了解如何将模糊滤镜应用于背景图像。
它非常简单和快速！

按照步骤操作并为创建模糊的背景图像。

添加 CSS

使用 background-image 属性添加图像的链接。
使用 height 属性设置图像的高度，然后使用 background-position 属性指定图像的位置。

其中我们设置“中心”值。

应用 background-position 后，通过将 background-repeat 属性设置为“no-repeat”使图像不重复。
将 background-size 指定为“cover”，将背景图像缩放到尽可能大以覆盖所有背景区域。
使用 filter 属性使我们的图像模糊。

filter 属性具有“blur”值，它在图像上应用模糊。它以像素为单位指定。值越大，应用的模糊就越多。我们将其设置为“5px”。

不要忘记为 Safari、Google Chrome 和 Opera（较新版本）添加 -Webkit-，为 Firefox 添加 -Moz-，为具有过滤器属性的旧版 Opera 添加 -o-。

这是我们所拥有的。
我们即将接近 tail声！

.image {
  background-image: url("https://onitroad.com/bg.png");
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(5px);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
}

这样，工作就完成了一半。
现在，使用颜色、字体粗细、边框和其他属性设置文本样式。

.text {
  color: #eeeeee;
  font-weight: bold;
  border: 3px solid #cccccc;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 80%;
  padding: 20px;
  text-align: center;
}

现在让我们看看结果。

添加模糊背景图像的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      body,
      html {
        height: 100%;
        margin: 0;
        font-family: Arial, Helvetica, sans-serif;
      }
      h2 {
        font-size: 30px;
      }
      .image {
        background-image: url("https://onitroad.com/bg.png");
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        filter: blur(5px);
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -o-filter: blur(5px);
        -ms-filter: blur(5px);
      }
      .text {
        color: #eeeeee;
        font-weight: bold;
        border: 3px solid #cccccc;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80%;
        padding: 20px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="image"></div>
    <div class="text">
      <h1>onitroad</h1>
      <h2>Blurred Background Image</h2>
      <p>Snippet</p>
    </div>
  </body>
</html>

模糊的背景图像

让我们看另一个背景图像模糊的例子。

使用 :checked 选择器添加模糊背景图像的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      .background-image {
        position: fixed;
        left: 0;
        right: 0;
        z-index: 1;
        display: block;
        background-image: url(" /onitroad.jpeg");
        width: 1200px;
        height: 800px;
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -o-filter: blur(5px);
        -ms-filter: blur(5px);
        filter: blur(5px);
      }
      .content {
        position: fixed;
        left: 0;
        right: 0;
        z-index: 9999;
        margin-left: 20px;
        margin-right: 20px;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <h2>:checked selector example</h2>
    <div class="background-image"></div>
    <div class="content">
      <p>
        今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
生活终归还得继续。
      </p>
      <p>
       今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
生活终归还得继续。
      </p>
    </div>
  </body>
</html>

日期：2020-06-02 22:14:56 来源：oir作者：oir

←如何使进度条的背景可以动画

如何将 CSS 样式应用于元素名称→

创建 HTML

添加 CSS

添加模糊背景图像的示例：

模糊的背景图像

使用 :checked 选择器添加模糊背景图像的示例：

目录