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屬性不起作用

回答

相關問題