CSS的z-index属性不起作用

我想给的“过滤器”属性的悬停效果，以一个div（背景图片）。但它已经对另一个应该结束的div（我的文本）产生影响。我应用了z-index属性（不忘记我的div的位置），但它不起作用。你会看到，我的文字也模糊了，不应该。你能告诉我请问我的代码有什么问题吗？CSS的z-index属性不起作用

这里是codepen显示我的问题：https://codepen.io/Gillian-D/pen/qmqEQy

HTML

<div class="container"> 
    <div class="row"> 
    <div class="col-sm-6 left_part-padding"> 
     <div class="left_part"> 
      <div class="left_part_content"> 
      Left part 
      </div> 
     </div> 
    </div> 
</div>

CSS

.container { 
    margin-right: auto; 
    margin-left: auto; 
} 


.left_part { 
    height: 40vh; 
    position: relative; 
    z-index: 0; 
    background-image: url(img/book2.jpeg); 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-color: #000; 
    box-shadow: 0 50px 60px 0 rgba(0,0,0,.35); 
    border-radius: 10px; 
} 


.left_part:hover { 
-webkit-filter: blur(5px); 
filter: blur(5px); 
-webkit-transition: .5s ease-in-out; 
position: relative; 
z-index:0; 
} 

.left_part_content:hover { 
color: #fed136; 
position: relative; 
z-index: 2; 
} 

.left_part-padding, .right_part-padding, .bottom_part-padding { 
padding-left: 10px; 
padding-right: 10px; 
} 

.left_part_content { 
    color: white; 
    font-family: "Raleway", Helvetica, Arial, sans-serif; 
    text-transform: uppercase; 
    font-size: 1.2rem; 
    font-weight: 400; 
    letter-spacing: .300em; 
    margin-right: -.300em; 
    text-align: center; 
    vertical-align: middle; 
    line-height: 40vh; 
    position: relative; 
    z-index: 2; 
}

非常感谢！

来源

2017-04-25 G. Delvigne

模糊属性模糊了所有的元素和子元素，你不能以这种方式制作你想要的东西 –

当您在元素上添加效果，在大多数情况下，他们的孩子得到的影响一样，所以在这种情况下，你可以使用一个伪元素为background-image

Updated codepen

更改CSS规则

.left_part { 
    height: 40vh; 
    position: relative; 
    background-color: #000; 
    box-shadow: 0 50px 60px 0 rgba(0,0,0,.35); 
    border-radius: 10px; 
} 

.left_part::before { 
    content: ''; 
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; 
    height: 100%; 
    background-image: url(http://lorempixel.com/500/200/nature/1/); 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-color: #000; 
    border-radius: 10px; 
} 

.left_part:hover::before { 
    -webkit-filter: blur(5px); 
    filter: blur(5px); 
}

来源

2017-04-25 13:37:29 LGSon

非常感谢！它完美的工作！ –

看一看这里：

https://codepen.io/anon/pen/EmNPVZ

我把文本部分元素了对被模糊的背景格的，现在都具有相同的父。接下来我以不同的方式解决了居中问题（通常的方法（绝对位置，顶部和左侧50％，transform: translate(-50%, -50%)），然后我将pointer-events: none;应用于文本图层，以便将它悬停在文字图层上方，然后添加了不同的悬停规则， HTH

来源

2017-04-25 13:47:43 Johannes

CSS的z-index属性不起作用

回答

相关问题