Mặt nạ không hoạt động trong Gecko

Question

Tôi đang cố gắng che một phần tử có một số hình ảnh bên trong nó, chỉ sử dụng css. tôi đã làm điều này và nó hoạt động tốt trong webkit sử dụng -webkit-mask-box-image và nó làm chỉ là những gì tôi muốn, nhưng im gặp rắc rối khi sử dụng các trình duyệt khác.

tắc kè được cho là hoạt động bằng cách sử dụng mask và thẻ đó không hiển thị trong firebug, nhưng nó không thực sự sử dụng mặt nạ .. tôi cũng đã thử chuyển đổi png im bằng uri cơ sở dữ liệu64 nhưng không có kết quả.

dụ: http://jsfiddle.net/nNLta/

không ai biết một cách chính xác để làm điều này?

HTML

<div id='wrap'> 
     <div class='masked flashing-anim'> 
      <div class='the-mask' > 
       <ul> 
         <li class='blink_1'></li> 
         <li class='blink_2'></li> 
       </ul> 
      </div> 
     </div> 
     <div class='the-outline'> 
      <img src='img/real-stuff.png' height=500 /> 
     </div> 
     </div> 

CSS

#wrap { 
    position: relative; 
    } 
    .the-outline, the-mask { 
     position: absolute; 
     top: 0; 
    } 
    .the-mask { 
     height: 500px; 
     width: 360px; 
     -webkit-mask-box-image: url(../img/the-mask.png); 
     -moz-mask-box-image: url(../img/the-mask.png); 
     -o-mask-box-image: url(../img/the-mask.png); 
     mask-box-image: url(../img/the-mask.png); 
     mask: url(data:lotsofchars); 
    } 

dụ: http://jsfiddle.net/nNLta/

Answer 1

Phần 1

mask là không giống như mask-box-image không may. Nếu bạn đọc (thay vì thưa thớt) docs bạn sẽ thấy nó chỉ áp dụng cho SVG. Thêm về điều này sau.

Hiện tại Gecko không hỗ trợ 'mask-box-image' - nếu bạn search the MDN bạn sẽ thấy nó chỉ áp dụng cho -webkit-only.

Ngoài ra, tôi không nghĩ đây thực sự là thông số kỹ thuật. Webkit đã có khả năng/khái niệm này cho các lứa tuổi (trong các hình thức khác nhau như -webkit-box-reflect) và tôi nghĩ rằng nó chỉ là một nôn nao từ những ngày đó. Tôi không chắc liệu điều này thậm chí sẽ được chấp nhận bởi tất cả các nhà cung cấp trình duyệt (mặc dù tôi hy vọng, và nó có ý nghĩa rằng, nó sẽ).

Phần 2

Để sử dụng svg phụ thuộc tài sản mask: css bạn cần phải tạo ra một yếu tố SVG và tham khảo đó. Here is a guide. Tôi đã không sử dụng kỹ thuật này trước đây vì vậy tôi sợ rằng đó là tất cả các chi tiết tôi sẽ đi vào ngay bây giờ.

Một lựa chọn thay thế

Nếu bạn không cần một minh lặp lại/phát triển mặt nạ tại sao không tạo ra một png lớn và che phủ các văn bản/hình ảnh mà bạn muốn ẩn. Tôi không chắc tôi hiểu những gì bạn đang cố gắng làm nhưng điều này có vẻ khá đơn giản đối với tôi. Vấn đề rõ ràng là khi bạn cần những thứ đằng sau mặt nạ để có thể lựa chọn/tương tác (err..interactive đó là ...); ví dụ khi bạn muốn áp dụng mặt nạ cho văn bản hoặc liên kết. Một cách xung quanh việc này là sử dụng pointer-events:none được hỗ trợ trong Gecko và Webkit (nhưng không có gì khác ...). Đây là more from the MDN

Xin lỗi tôi không có tin tức tốt hơn - nếu không có điều nào hữu ích ở trên, vui lòng để lại nhận xét với yêu cầu cụ thể của bạn và chúng tôi sẽ không xem xét giới hạn của trình duyệt.

Hy vọng điều này hữu ích!