2010-12-10 24 views
5

Tôi có thiết kế này cho một cuốn sách HTML và tôi đang cố gắng đạt được một hiệu ứng nhất định làm mờ văn bản khi cuộn trang mà tôi đã thực hiện thành công bằng cách sử dụng div cố định với giá trị z-index cao cấp và hình nền PNG.Làm cách nào để tạo liên kết phía sau div với giá trị z-index cao cấp có thể nhấp?

.book-bg { 
background: url(../../img/book-frame-bg.png) no-repeat fixed center top; 
position: fixed; 
left: 0; 
right: 0; 
top: 0; 
bottom: 0; 
z-index: 100;} 

Nhưng bây giờ tất cả các liên kết của tôi được bao phủ bởi div ".book-bg" không thể nhấp, làm thế nào tôi có thể giải quyết vấn đề này?

trang mẫu

đây: http://mmahgoub.com/thebook/chapter-01.html

Cảm ơn

Trả lời

11

Trong Firefox, Opera and Chrome/Safari bạn có thể sử dụng pointer-events: none trong quy tắc CSS của bạn. Nếu bạn cần khả năng tương thích với IE, hãy thử Forwarding Mouse Events Through Layers.

+0

Wow man! điều đó thực sự hữu ích, cảm ơn bạn rất nhiều. – mmahgoub

+0

Kỳ lạ đủ IE9 không nhận ra các sự kiện con trỏ: không có; xấu hổ làm sao! – mmahgoub

+0

@mmahgoub Nó thực sự phải là dành cho SVG, tôi không mong đợi IE sẽ hỗ trợ nó trong HTML cho đến khi họ đã thêm hỗ trợ cho nó trong SVG. – robertc

1

các liên kết của bạn sẽ cần chỉ mục z cao hơn, vì điều này, chúng sẽ cần được định vị, tương đối, nổi hoặc cố định.

Các vấn đề liên quan