分层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兄弟元素：

Updated Example

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

这样做，您绝对可以将.item元素 relative 放置到父元素.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

＆＃13;

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;