tạo hiệu ứng nền mờ

Question

Tôi đang cố tạo hiệu ứng mờ trên một trang. Tôi muốn cửa sổ bật lên hiển thị và sau đó phần còn lại của trang bị mờ. Tuy nhiên, tôi dường như chỉ có thể làm mờ các hình nền, chứ không phải các yếu tố thực tế trên trang, là những gì tôi đang cố gắng làm thậm chí có thể?

Answer 1

Bạn có thể làm mờ các phần tử riêng lẻ, nhưng bạn không thể tạo lớp phủ mờ.

May mắn thay, CSS -prefix-filter: blur(##) sẽ tự động áp dụng cho các phần tử con. Những gì bạn cần phải bao gồm mọi phần tử ngoại trừ cửa sổ bật lên của bạn trong div, sau đó apply the blur to that.

Ví dụ JS:

$('body > *').wrap('<div class="blur-all">').append($popup); 

CSS:

.blur-all { 
    -webkit-filter: blur(10px); 
    -moz-filter: blur(10px); 
    -o-filter: blur(10px); 
    -ms-filter: blur(10px); 
    filter: blur(10px); 
} 

Đừng quên để unwrap con cái .blur-all một khi bạn đang thực hiện với các popup.