Làm mờ một phần cụ thể của hình nền

Question

Giả sử trang web của tôi được sắp xếp như thế này theo các lớp.

• Background Image (background-size:cover;)
• 500 x 500 div với một nền trắng bán trong suốt.
• Nội dung trong div.

Điều tôi muốn là khu vực dưới div (trên hình nền) sẽ bị mờ. Vấn đề của tôi là với các kích thước màn hình khác nhau, tôi không thể có hình nền "được làm mờ" vì div đó sẽ không luôn được căn chỉnh với nền.

Vì vậy, câu hỏi của tôi là, có thể làm mờ một phần cụ thể của hình nền khi đang di chuyển bằng cách xác định vùng như tôi muốn cho div không? Ví dụ: position:absolute; top:45% right:0; Hoặc tùy chọn trình duyệt chéo tốt nhất của tôi là gì. CSS hoặc khôn ngoan khác, nó không quan trọng.

Cảm ơn

---

Trên một mặt lưu ý Tôi đã suy nghĩ về việc có một div Inbetween nền và trước đó đã nói về div với một hình nền giống như một đằng sau nó nhưng thiết lập nó là nền vị trí để khớp với div tiền cảnh và chỉ làm mờ nó. Kinda như phóng to vào một bức ảnh trong các chương trình như ps và hộp trong navigator đề cập đến chỉ là một phần của hình ảnh được hiển thị.

Answer 1

Đây có thể là nặng chút cho những gì bạn đang cố gắng để làm, nhưng bạn có thể sử dụng Blur.js

$('.target').blurjs({ 
    source: 'body', 
    radius: 10, 
}); 

Nếu bạn cần để làm mờ nhiều hơn nền, thanh toán:
https://stackoverflow.com/a/17134789/1947286

Answer 2

Bạn có thể chồng lên một ảnh với nhau (sử dụng div s) và làm mờ lớp phủ.

<div style="position: relative; background: URL(...)"> 

<div style="position: absolute; background: URL(...); 
     top: ...; left: ...; width: ...; height: ...; filter: blur(3px)"> 

Cập nhật: Đây là nó trong sự hoàn hảo: http://css-tricks.com/blurry-background-effect/