Question

我正在我的网站上工作，并使背景图像模糊。但是图像上的文字也显示模糊。

.container11 {
  position: relative;
  text-align: center;
  color: white;
}

.centered1 {
   position: absolute;
   top: 18%;
   left: 50%;
   transform: translate(-50%, -50%);
}
.centered {
  position: absolute;
  top: 64%;
  left: 0%;
  transform: translate(-1%, -64%);
}

<div class="container11">
	<img src="https://www.swoopanalytics.com/wp-content/uploads/2019/02/Group-members.jpg" alt="Snow"/>
	<h1 class="centered1">Centered</h1>
	<div class="centered">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</div>

我还想添加背景图像：线性渐变css，以使图像模糊。

background-image: linear-gradient(70deg, rgba(9,132,227,0.85) 40%, rgba(0,59,177,0.98) 100%);

但是我卡在代码中，并且此代码不适合移动设备使用。当我在移动设备上查看网站时，文字的对齐方式发生了变化。

Answer 1

向您的blur标签添加具有过滤效果的类<img>。

.blur {
    filter: blur(5px);
}

<img class="blur" src="https://www.swoopanalytics.com/wp-content/uploads/2019/02/Group-members.jpg" alt="Snow"/>

.blur {
  filter: blur(5px);
}

.container11 {
  position: relative;
  text-align: center;
  color: white;
}

.centered1 {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.centered {
  position: absolute;
  top: 64%;
  left: 0%;
  transform: translate(-1%, -64%);
}

<div class="container11">
  <img class="blur" src="https://www.swoopanalytics.com/wp-content/uploads/2019/02/Group-members.jpg" alt="Snow" />
  <h1 class="centered1">Centered</h1>
  <div class="centered">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</div>

我已经更新了使用background-blend-mode的第二个解决方案。但是，我不太了解混合模式是如何工作的。请参阅代码以了解我能达到的效果。

.hidden {
  visibility: hidden;
}

.container11:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(90deg, rgba(16, 123, 204, 1) 0%, rgba(5, 69, 181, 1) 100%), url("https://www.swoopanalytics.com/wp-content/uploads/2019/02/Group-members.jpg"), linear-gradient(90deg, rgba(16, 123, 204, 1) 0%, rgba(5, 69, 181, 1) 100%);
  <!-- background-image: linear-gradient(70deg, rgba(9, 132, 227, 0.85) 40%, rgba(0, 59, 177, 0.98) 100%), url("https://www.swoopanalytics.com/wp-content/uploads/2019/02/Group-members.jpg");
  -->background-size: cover;
  background-blend-mode: color, overlay;
  filter: blur(1px);
}

.container11 {
  position: relative;
  text-align: center;
  color: white;
}

.centered1 {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.centered {
  position: absolute;
  top: 64%;
  left: 0%;
  transform: translate(-1%, -64%);
}

<div class="container11">
  <img class="hidden" src="https://www.swoopanalytics.com/wp-content/uploads/2019/02/Group-members.jpg" alt="Snow" />
  <h1 class="centered1">Centered</h1>
  <div class="centered">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</div>

使背景图片模糊而不是文字

1 个答案: