对div和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成为同级元素：

更新示例

<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元素以建立堆叠上下文，使其出现在兄弟元素上方。

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

最后，使用选择器.itemLeft:hover .item将模糊滤波器应用于.item元素。在执行此操作时，现在将在悬停在父元素而不是.item元素上时发生。

更新示例

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