在容器中模糊bg图像，但不是内部的内容

时间：2017-07-21 15:51:37

标签： jquery html css

我有一个背景图片设置为cover的列，并且在列中还有另一个包含内容的div：标题，说明和标签。

内容设置为display: none;，背景图片为焦点。

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

然而，内容也变得模糊，我无法弄清楚如何去除模糊并使内容聚焦，同时保持背景图像模糊。

DEMO ：https://jsfiddle.net/499hes8f/3/

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

＆＃13;
＆＃13; 
.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;
  }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：1)

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

我将内容保留在.project-content2中，并将BG移动到自己的DIV .project-bg .blur。这两个都包含在.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>

答案 1 :(得分：0)

<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 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 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>
<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>

.project {
position: relative;
}

.project-bg {
position: absolute;
width: 100%;
height: 100%;
backgrounds-size: cover;
}

使用内容样式和z-index。我还没有测试过代码，但我认为它会让你走上正轨。

您应该能够以这种方式更准确地定位背景容器，而不会影响内容。

让我知道！ ：）

答案 2 :(得分：0)

迪伦钉了它。对于模糊或不透明度过滤器等属性，您需要将内容与背景分开。

我想提供一个重新分解的版本，可以显着简化您的工作。这不能直接实现到您提供的内容中，但它是一个更简单，可扩展的版本。

小提琴：https://jsfiddle.net/hnjq88nd/8/

HTML：

kNormal

CSS：

<div class="project">
  <div class="project-1">
    <div class="project-content">
      My Content
    </div>
    <div class="project-bg" style="background: url('http://i.imgur.com/0JQxkW7.jpg') center center / cover;">
      &nbsp;
    </div>
  </div>
</div>

我实施了一些有用的选择器，以满足您的需求：

* {
  position: relative;
}

html,
body {
  height: 100%;
}

.project {
  width: 100%;
  height: 500px;
}

[class^="project-"],
.project-content,
.project-bg {
  height: 100%;
}

.project-content {
  padding: 75px;
  opacity: 0;
  transition: opacity .2s;
  color: #fff;
  z-index: 2;
  transform: scale(.95);
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

.project-bg {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

/* Interactions */
[class^="project-"]:hover .project-content {
  opacity: 1;
  transform: scale(1.04);
}

[class^="project-"]:hover .project-bg {
  -webkit-filter: blur(10px);
  filter: blur(10px);
  transform: scale(1.09);
}

将过渡属性移动到主元素而不是像hover这样的交互，你的in＆amp;动画全面适用。

[class^="project-"] // Call on any project-# selector
相关问题
最新问题