jquery - 模糊容器中的背景图像，但不模糊容器中的内容

标签 jquery html css

我有一个背景图像设置为 cover 的列，在列内还有另一个包含内容的 div:标题、描述和标签。

内容设置为 display: none; 并且背景图像处于焦点位置。

当我将鼠标悬停在背景图片上时，它会变模糊并​​显示内容。

但是，内容也变得模糊，我不知道如何在保持背景图像模糊的同时消除模糊并使内容聚焦。

演示:https://jsfiddle.net/499hes8f/3/

内容可能有点难看，但它就在那里，只需将鼠标移到左上角即可。

.btn-dark {
  padding: 20px 0;
  border: 1px solid #fff;
  display: block;
  margin: 0 auto;
  text-decoration: none!important;
  margin-top: 40px;
  text-align: center;
  font-size: 1vw;
}

a.btn-dark:after {
  display: none!important;
}

.no-padding {
  padding: 0;
}

.project {
  overflow: hidden;
}

.project-bg {
  height: 500px;
}

.blur:hover:not(.project-content2) {
  background-repeat: no-repeat;
  margin: auto;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  -webkit-filter: blur(10px);
  filter: blur(10px);
  transform: scale(1.09);
}

.blur {
  -webkit-filter: blur(0px);
  filter: blur(0px);
  transform: scale(1);
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

.project-content2 {
  margin: 0 auto;
  color: #fff;
  padding: 75px;
}

.project .project-content,
.project .project-content2 {
  display: none;
}

.project-first .project-content,
.project-first .project-content2 {
  display: block;
  -webkit-filter: blur(0px);
  filter: blur(0px);
  z-index: 99999999999999999999999999999;
}

.project:hover .project-content,
.project:hover .project-content2 {
  display: block;
  -webkit-animation: fadeInFromNone 1s ease-out;
  -moz-animation: fadeInFromNone 1s ease-out;
  -o-animation: fadeInFromNone 1s ease-out;
  animation: fadeInFromNone 1s ease-out;
  -webkit-filter: blur(0px);
  filter: blur(0px);
  z-index: 99999999999999999999999999999999;
}

@-webkit-keyframes fadeInFromNone {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
  }
  100% {
    display: block;
    opacity: 1;
  }
}

@-moz-keyframes fadeInFromNone {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
  }
  100% {
    display: block;
    opacity: 1;
  }
}

@-o-keyframes fadeInFromNone {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
  }
  100% {
    display: block;
    opacity: 1;
  }
}

@keyframes fadeInFromNone {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
  }
  100% {
    display: block;
    opacity: 1;
  }
}
<div class="col-md-6 no-padding project">
  <div class="project-bg blur" style="background: url('http://i.imgur.com/0JQxkW7.jpg') center center / cover;">
    <div class="project-content2">
      <h2><a href="#">Through The Telescope</a></h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed mauris nunc. Sed vel aliquet felis. Sed eget laoreet sem. Cras in sagittis felis. Aliquam sollicitudin porta est vitae volutpat. Mauris et cursus massa. Nullam ante felis, gravida
        eu leo sit amet, sodales accumsan justo. Sed sit amet leo tristique, dictum mauris vitae, aliquam nibh. Curabitur a dui lectus. Ut molestie, ipsum vel lacinia auctor, odio magna pellentesque risus, vestibulum facilisis justo mi quis mi. Vivamus
        semper ipsum eget tincidunt ullamcorper.</p>
      <div class="tags-button hidden-xs hidden-sm">
        <a href="#" class="btn btn-dark btn-lg">Tag</a>
      </div>
    </div>
  </div>
</div>

最佳答案

解决这个问题的一个简单方法是将您的内容和背景图像放在两个单独的 DIV 中。

我将内容留在 .project-content2 中，并使用 .project-bg .blur 将 BG 移动到它自己的 DIV 中。两者都包装在 .project-wrapper DIV 中。

然后将元素背景 DIV 绝对定位在元素包装器 DIV 内:

.project-wrapper {
  height: 500px;
  position:relative;
}

.project-bg {
  position:absolute;
  top: 0;
  left:0;
  right:0;
  bottom:0;
 }

并将悬停选择器重构为 .project:hover .blur。

.btn-dark {
  padding: 20px 0;
  border: 1px solid #fff;
  display: block;
  margin: 0 auto;
  text-decoration: none!important;
  margin-top: 40px;
  text-align: center;
  font-size: 1vw;
}

a.btn-dark:after {
  display: none!important;
}

.no-padding {
  padding: 0;
}

.project {
  overflow: hidden;
}

.project-wrapper {
  height: 500px;
  position:relative;
}

.project-bg {
  position:absolute;
  top: 0;
  left:0;
  right:0;
  bottom:0;
 }

.project:hover .blur {
  background-repeat: no-repeat;
  margin: auto;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  -webkit-filter: blur(10px);
  filter: blur(10px);
  transform: scale(1.09);
}

.blur {
  -webkit-filter: blur(0px);
  filter: blur(0px);
  transform: scale(1);
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

.project-content2 {
  margin: 0 auto;
  color: #fff;
  padding: 75px;
}

.project .project-content,
.project .project-content2 {
  display: none;
}

.project-first .project-content,
.project-first .project-content2 {
  display: block;
  -webkit-filter: blur(0px);
  filter: blur(0px);
  z-index: 99999999999999999999999999999;
}

.project:hover .project-content,
.project:hover .project-content2 {
  display: block;
  -webkit-animation: fadeInFromNone 1s ease-out;
  -moz-animation: fadeInFromNone 1s ease-out;
  -o-animation: fadeInFromNone 1s ease-out;
  animation: fadeInFromNone 1s ease-out;
  -webkit-filter: blur(0px);
  filter: blur(0px);
  z-index: 99999999999999999999999999999999;
}

@-webkit-keyframes fadeInFromNone {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
  }
  100% {
    display: block;
    opacity: 1;
  }
}

@-moz-keyframes fadeInFromNone {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
  }
  100% {
    display: block;
    opacity: 1;
  }
}

@-o-keyframes fadeInFromNone {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
  }
  100% {
    display: block;
    opacity: 1;
  }
}

@keyframes fadeInFromNone {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
  }
  100% {
    display: block;
    opacity: 1;
  }
}
<div class="col-md-6 no-padding project">
  <div class="project-wrapper">
  
    <div class="project-bg blur" style="background: url('http://i.imgur.com/0JQxkW7.jpg') center center / cover;"></div>
    
    <div class="project-content2">
      <h2><a href="#">Through The Telescope</a></h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed mauris nunc. Sed vel aliquet felis. Sed eget laoreet sem. Cras in sagittis felis. Aliquam sollicitudin porta est vitae volutpat. Mauris et cursus massa. Nullam ante felis, gravida
        eu leo sit amet, sodales accumsan justo. Sed sit amet leo tristique, dictum mauris vitae, aliquam nibh. Curabitur a dui lectus. Ut molestie, ipsum vel lacinia auctor, odio magna pellentesque risus, vestibulum facilisis justo mi quis mi. Vivamus
        semper ipsum eget tincidunt ullamcorper.</p>
      <div class="tags-button hidden-xs hidden-sm">
        <a href="#" class="btn btn-dark btn-lg">Tag</a>
      </div>
    </div>
    
  </div>
</div>

关于jquery - 模糊容器中的背景图像，但不模糊容器中的内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45241901/

上一篇：没有输入字段的 HTML 日期选择器。使用 VBA 触发更新事件

下一篇：html - 如何缩小 Symfony/Twig 生成的 HTML 代码以满足 Google PageSpeed Insight？

相关文章：

javascript - 如何禁用浏览器左下角的 href 显示？

javascript - 用 onclick 重叠两个元素

javascript - 如何使用javascript更改带有选择标签的div的背景图像？

javascript - 选择行时启用自定义按钮(默认情况下禁用)

javascript - select2 multiple 防止其他输入在输入时提交表单

javascript - Mozilla 和 IE 修改了我的下拉列表的外观，但 chrome 没有

javascript - 灯箱不起作用，尽管加载了 jquery

html - 在普通图像之前加载 CSS 背景图像？

css - 从 xlst 转换访问外部 css 样式表

javascript - 将 div 内的 div 与 Label 对齐？

©2024 IT工具网  联系我们