layering divs and css

Question

我仍然在学习CSS和div如何协同工作，并希望模糊效果仅在每次翻转的背景下发生，而不是在覆盖它的红色图像上发生。我不知道最好的方法是什么。

jsfiddle

CSS：

.bg { 
    width:100%; 
    padding:70px 0px 70px 0px; 
} 
.wrapper { 
    width:94%; 
    max-width:800px; 
    margin:0px auto; 
} 
.itemLeft { 
    width:48%; 
    background-color:#777; 
    float:left; 
    margin-left:1%; 
    margin-right:1%; 
} 
.item { 
    width:100%; 
    background-position:center center; 
    text-align:center; 
    background-image:url("http://lorempixel.com/300/150/sports/"); 
    background-repeat: no-repeat; 
} 
.item img { 
    text-align:center; 
} 
.item:hover { 
    cursor:pointer; 
    width:100%; 
    background-position:center center; 
    text-align:center; 
    background-image:url("http://lorempixel.com/300/150/sports/"); 
    background-repeat: no-repeat; 
    filter: blur(5px); 
    -webkit-filter: blur(5px); 
    -moz-filter: blur(5px); 
    -o-filter: blur(5px); 
    -ms-filter: blur(5px); 
} 

HTML：

<div class="bg"> 
    <div class="wrapper"> 
     <div class="itemLeft"> 
      <div class="item"> 
       <img src="http://placehold.it/128x150/a00000" /> 
      </div> 
     </div> 
     <div class="itemLeft"> 
      <div class="item"> 
       <img src="http://placehold.it/128x150/f00000" /> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

模糊滤镜应用到.item元素和它的孩子，因此img元素总是要如果它是一个孩子，就会模糊不清。

一种选择将是使.item和img兄弟元素来代替：

Updated Example

<div class="itemLeft"> 
    <div class="item"></div> 
    <img src="http://placehold.it/128x150/a00000" /> 
</div> 

这样做，你可以绝对.item元素相对定位到父元素，.itemLeft，以便使用top: 0/left: 0/bottom: 0/right: 0填充整个元素。

.itemLeft { 
    position: relative; 
} 
.item { 
    width: 100%; 
    background: url("http://lorempixel.com/300/150/sports/") center center/auto auto no-repeat; 
    position: absolute; 
    top: 0; left: 0; bottom: 0; right: 0; 
} 

然后img元件定位到establish a stacking context使其显示以上同级。

.wrapper img { 
    position: relative; 
    vertical-align: top; 
} 

最后，使用选择器.itemLeft:hover .item到模糊滤波器应用到.item元件。这样做时，现在将鼠标悬停在父元素上而不是.item元素上。

Updated Example

.bg { 
 
    padding: 70px 0px; 
 
} 
 
.wrapper { 
 
    width: 94%; 
 
    max-width: 800px; 
 
    margin: 0px auto; 
 
} 
 
.itemLeft { 
 
    width:48%; 
 
    background-color:#777; 
 
    float:left; 
 
    margin-left:1%; 
 
    margin-right:1%; 
 
    position: relative; 
 
    text-align: center; 
 
} 
 
.item { 
 
    width: 100%; 
 
    background: url("http://lorempixel.com/300/150/sports/") center center/auto auto no-repeat; 
 
    position: absolute; 
 
    top: 0; left: 0; bottom: 0; right: 0; 
 
} 
 
.wrapper img { 
 
    position: relative; 
 
    vertical-align: top; 
 
} 
 
.itemLeft:hover .item { 
 
    cursor:pointer; 
 
    width:100%; 
 
    background-position:center center; 
 
    text-align:center; 
 
    background-image:url("http://lorempixel.com/300/150/sports/"); 
 
    background-repeat: no-repeat; 
 
    filter: blur(5px); 
 
    -webkit-filter: blur(5px); 
 
    -moz-filter: blur(5px); 
 
    -o-filter: blur(5px); 
 
    -ms-filter: blur(5px); 
 
}

<div class="bg"> 
 
    <div class="wrapper"> 
 
     <div class="itemLeft"> 
 
      <div class="item"></div> 
 
      <img src="http://placehold.it/128x150/a00000" /> 
 
     </div> 
 
     <div class="itemLeft"> 
 
      <div class="item"></div> 
 
      <img src="http://placehold.it/128x150/f00000" /> 
 
     </div> 
 
    </div> 
 
</div>