html - 修复了具有模糊效果的标题，我做错了什么？-6ren

html - 修复了具有模糊效果的标题，我做错了什么？

转载作者：太空宇宙更新时间：2023-11-04 10:41:54

我正在尝试制作这样的页面

Header 应该修复，bg-image 也应该修复，我做到了。我唯一的问题是，如何制作完全相同的模糊。我做错了什么？

这是我的代码

<body>
    <div class="main">
      <div class="bg-image">
        <div class="header"></div>
      </div>
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam cumque, esse eum facere illum iste maxime neque omnis saepe temporibus totam veritatis! Asperiores, dignissimos illum in labore libero nihil saepe!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam cumque, esse eum facere illum iste maxime neque omnis saepe temporibus totam veritatis! Asperiores, dignissimos illum in labore libero nihil saepe!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam cumque, esse eum facere illum iste maxime neque omnis saepe temporibus totam veritatis! Asperiores, dignissimos illum in labore libero nihil saepe!</p>
      </div>
    </div>
  </body>

这是 SASS

@mixin background($imgpath,$position:0 0,$repeat: no-repeat)
  background:
    image: url($imgpath)
    position: $position
    repeat: $repeat

html, body
  height: 100%
  width: 100%
  padding: 0
  margin: 0

.bg-image
  @include background('http://imgur.com/sTO5GYX')
  background-size: cover
  background-attachment: fixed
  display: block
  height: 500px
  width: 100%
  z-index: 1
  .header
    @include background('http://imgur.com/sTO5GYX')
    position: fixed
    top: 0
    left: 0
    z-index: 2
    background: rgba(153, 184, 208, 0.3)
    height: 50px
    display: block
    width: 100%
    filter: blur(2px)
.content
  height: 1500px
  display: block
  width: 100%
  text-align: center

最佳答案

图层:
1- 常规背景图片；
1.5- 纯色层以避免在面对白色背景时出现模糊的边界；
2- 模糊克隆(降低高度)；
3- 低不透明度的白色层(高度降低)；

在第 2 层 上使用亮度过滤器是可选的(根据图片):

  -webkit-filter: blur(5px) brightness(120%); /* Chrome, Safari, Opera */
  filter: blur(5px) brightness(120%);

jsfiddle 1 - regular bg;

jsfiddle 2 - white bg;

body {
  width: 100vw;
  height: 100vh;
  background-color: rgb(255,204,255);
  margin: 0%;  
}
	
.bg1 {
  width: 100%;
  height: 100%;
  background-image: url('http://i.imgur.com/tWZjcIp.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

.bg1_5 {
  width: 100%;
  height: 20%;
  position: absolute;
  top: 0px;  
  background: rgba(174,116,187,0.5);
  background-repeat: no-repeat;
  background-size: cover;
}

.bg2 {
  width: 100%;
  height: 20%;
  position: absolute;
  top: 0px;  
  background-image: url('http://i.imgur.com/tWZjcIp.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
  filter: blur(5px);
}

.bg3 {
  width: 100%;
  height: 20%;
  position: absolute;
  top: 0px;  
  background: rgba(255,204,255,0.1);
  background-repeat: no-repeat;
  background-size: cover;
}

<div class="bg1"></div>

<div class="bg1_5"></div>

<div class="bg2"></div>

<div class="bg3"></div>

关于html - 修复了具有模糊效果的标题，我做错了什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35729574/

文章推荐： linux - 在 VirtualBox 上连接 WinSCP 和 Ubuntu

文章推荐： python django 名称约定

文章推荐： python - 组织数据的更好方法

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 修复了具有模糊效果的标题，我做错了什么？