Thay đổi độ mờ của tất cả các thành phần nhưng một Div

Question

Tôi đang cố gắng làm mờ tất cả các yếu tố trên trang web ngoại trừ một div. Tôi đã có thể mờ dần tất cả các yếu tố với jQuery sau:

$('*').css('opacity', .3); 

Tuy nhiên, có vẻ như là nếu opacity là một tài sản được thừa kế từ các yếu tố cha mẹ, ngay cả khi tôi thiết lập một cách rõ ràng opacity của div để 1 . Tôi đang vẽ một trống như bất kỳ giải pháp ngay bây giờ, vì vậy tôi có thể có một số trợ giúp ở đây?

Answer 1

Nếu những gì bạn muốn là làm cho div đặc biệt này nổi bật trực quan, bạn có thể xem xét một cách tiếp cận giống như cách được sử dụng cho cửa sổ phương thức/hộp đèn. Định vị div hoàn toàn với chỉ mục z cao và sau đó ngăn xếp một div khác ở giữa phần được đánh dấu và phần còn lại của nội dung có màu nền tối và độ mờ trung bình. Điều đó sẽ có hiệu lực "mờ" phần còn lại của trang trong khi vẫn giữ div được đánh dấu với vẻ ngoài bình thường của nó.

Answer 2

Có thể thay vì thực hiện công cụ chọn *, bạn có thể làm cho nó được nhắm mục tiêu nhiều hơn đến div hoặc whatnot và sau đó sử dụng bộ chọn not để bỏ qua bộ lọc bạn muốn giữ bình thường?

Còn có bài viết này trên CSS Opacity không ảnh hưởng đến trẻ em có thể hữu ích.

Answer 3

Độ mờ thực sự được kế thừa. Nếu bạn nghĩ về nó, nó không có nhiều ý nghĩa cho một div trong suốt để chứa một div không minh bạch anyway.

Điều bạn có thể làm thay vào đó là đặt màu nền của div thành trong suốt. Để làm điều này, bạn cần phải sử dụng màu sắc rgba nhưng hãy ghi nhớ điều này được hỗ trợ trong ít trình duyệt hơn.

Bạn có thể đọc so sánh hai yếu tố bao gồm hiệu ứng và triển khai của chúng, here.

Thông tin khác sẽ hữu ích. Nếu div được đề cập được tách biệt hoàn toàn với phần còn lại của nội dung, đôi khi, bạn muốn hiển thị nó trong sự cô lập mọi thứ khác, bạn có thể xem xét việc cấu trúc lại trang để nó không được chứa trong div cha.

Answer 4

Như Jimmy Cuadra đã đề xuất, bạn có thể thay đổi vị trí của div rồi thêm lớp phủ bên dưới nó ... Điều này tương tự như những gì Công cụ jQuery Expose thực hiện.

Bạn thực sự không cần plugin để thực hiện việc này, tôi đã trả lời một câu hỏi khác với cách tiếp cận tương tự. Tập lệnh này sẽ xóa lớp phủ nếu bạn nhấp vào bất kỳ đâu bên ngoài div được đánh dấu. Lưu ý điều này yêu cầu bạn sử dụng jQuery phiên bản 1.4+

// Relatively position the div to highlight 
$('#myDiv').css({ 
    position: 'relative', 
    top  : 0, 
    left : 0, 
    zIndex : 100 
}); 

// Add overlay and make clickable 
var w = $(window).width(); 
var h = $(window).height(); 
var $overlay = $('<div/>', { 
    'id': 'overlay', 
    css: { 
    position : 'absolute', 
    height  : h + 'px', 
    width  : w + 'px', 
    left  : 0, 
    top  : 0, 
    background : '#000', 
    opacity : 0.5, 
    zIndex  : 99 
    } 
}).appendTo('body'); 
// Click overlay to remove 
$('#overlay').click(function(){ 
    $(this).remove(); 
}) 

Answer 5

Một kỹ thuật tuyệt vời bao gồm việc áp dụng đường viền lớn cho div. Nó cũng hoạt động với một cái hộp lớn. Sự khác biệt được nêu chi tiết here.

Định nghĩa một lớp CSS, như highlight, với tài sản đó:

.highlight { 
    outline: 9999px solid rgba(0,0,0,0.5); 
} 

Trong javascript, bạn chỉ có thể áp dụng lớp đó để div của bạn:

$('#mydiv').addClass('highlight');