Tôi có thể áp dụng các bộ lọc CSS (3) CHỈ trên các phần hình ảnh không?

Question

Tôi có một hình nền toàn màn hình

.bg { 
    left: 0; 
    min-height: 100%; 
    min-width: 100%; 
    position: fixed; 
    top: 0; 
    z-index: -1; 
} 

và muốn áp dụng một bộ lọc CSS3, cá nhân tôi muốn sử dụng một hiệu ứng mờ ảo, ở vị trí tương tự như cơ thể của tôi

.container { 
    margin: 0 auto; 
    width: 1000px; 
} 

Dưới đây là một ví dụ:

screenshot http://imageshack.us/a/img443/4976/j7qj.jpg

Tôi muốn viết văn bản trên vùng chứa bị mờ.

Answer 1

http://jsfiddle.net/QvSng/6/

CSS

body { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background: url(http://lorempixel.com/420/255) no-repeat center center fixed; 
    background-size: cover; 
} 
body:before { 
    left: 0; 
    right: 0; 
    margin-left:auto; 
    margin-right:auto; 
    content: ""; 
    position: absolute; 
    height: 100%; 
    width: 500px; 
    background: url(http://lorempixel.com/420/255) no-repeat center center fixed; 
    background-size: cover; 
    z-index: -1; 
    filter: blur(5px); 
    -webkit-filter: blur(5px); 
} 

div { 
    height: 100%; 
    width: 450px; 
    margin: 0 auto; 
} 

Answer 2

Để có được hiệu ứng mờ ảo, sử dụng filter: blur() (với tiền tố nhà cung cấp). Nhòe chỉ áp dụng cho chính phần tử, chứ không phải bất kỳ thứ gì bên dưới nó, vì vậy bạn sẽ cần tham chiếu hình ảnh trong "hộp mờ" cũng như trong nền và sử dụng background-position để kiểm soát độ lệch để chúng xếp hàng đúng cách .

.blur { 
    background-image: url('http://placekitten.com/400/400'); 
    background-position: center -100px; 
    -webkit-filter: blur(10px); 
    -moz-filter: blur(10px); 
    -o-filter: blur(10px); 
    -ms-filter: blur(10px); 
    filter: blur(10px); 
    filter: blur(10px); 
} 

JSFiddle Demo

Answer 3

Bạn thực sự có thể áp dụng blur cho selector before và kế thừa background-image thay vì quy định cụ thể url hai lần.

Điều đó làm cho cấu trúc html rõ ràng hơn

JSFiddle Demo