.content {
float: left; width: 100%; background-image: url('images/zwemmen.png'); height: 501px; -webkit-filter: blur(3px); -moz-filter: blur(3px); -o-filter: blur(3px); -ms-filter: blur(3px); filter: blur(3px); } .opacity { background-color: rgba(5, 98, 127, 0.9); height: 100%; overflow: hidden; } .info { float: left; margin: 100px 0px 0px 30px; width: 410px; } <div class="content"> <div class="opacity"> <div class="image"> <img src="images/zwemmen.png" alt="" /> </div> <div class="info"> a div wih all sort of information </div> </div> </div>
如果我不想使按钮模糊,我该怎么办?
如何禁用子元素上的模糊?
.enableBlur>* { filter: blur(1.2px); } .disableBlur { filter: blur(0); } <div class="enableBlur"> <hr> qqqqq<br> <span>qqqqq</span><br> <hr class="disableBlur"> <div>aaaaa</div> <div>bbbbb</div> <div class="disableBlur">DDDDD</div> <hr> <img src="https://lh5.googleusercontent.com/-n8FG4f09-ug/AAAAAAAAAAI/AAAAAAAACmA/ldtxmWX1SyY/photo.jpg?sz=48"> <img class="disableBlur" src="https://lh5.googleusercontent.com/-n8FG4f09-ug/AAAAAAAAAAI/AAAAAAAACmA/ldtxmWX1SyY/photo.jpg?sz=48"> </div>