0
我有一個主要的div有一個filter:blur
和box-shadow
覆蓋的背景圖像。我怎樣才能覆蓋過濾器:包含div的父div的模糊和盒子陰影?
我如何覆蓋過濾器:包含div上的父div的blur和box-shadow?
以下是我的嘗試:
<style type="text/css">
#home_main {
margin: -30px;
background-size: cover;
padding: 0;
background-image: url('img/bg.jpg') !important;
filter: blur(2px);
overflow: hidden;
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.3);
}
body {
overflow: hidden !important;
}
#home_content {
text-align: center;
color: #fff !important;
font-weight: 600;
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
text-shadow: none;
font-family: 'Open Sans' !important;
filter: initial !important;
box-shadow: initial !important;
}
#home_content h1 {
font-size: 42px;
font-weight: bold;
}
</style>
<div id="home_main">
<div id="home_content">
Info Management System
</div>
</div>
讓我看看我是否得到這個......背景div不再是一個容器? –
這是一個容器,但它只是持有該背景圖像。當您將過濾器應用於容器時,該容器內的所有內容都將受到過濾器的影響......您無法選擇性地選擇哪些子元素不受過濾器影響。只需通過定位堆疊容器,以便它們*看起來就像它們被包含在彼此中一樣。 – Scott