Đặt độ mờ của phần tử trong div với độ mờ được xác định bởi CSS?

Question

Tôi đang làm việc trên một dự án mà tôi đang sử dụng một hình ảnh làm nền cho trình đơn. Tôi đã định nghĩa các lớp trong biểu định kiểu CSS của mình, nó ra lệnh xuất hiện khi các mục có hoặc không được "chọn", nghĩa là người dùng không nằm trên trang mà mỗi mục được liên kết đến.

Tôi có cấu trúc với một div ở trên cùng của hình ảnh với các kiểu được áp dụng cho nó để làm cho nó có nền trắng bán trong suốt, vì vậy có vẻ như một phần của hình ảnh được tô sáng. Mỗi div bán trong suốt cũng chứa văn bản tạo nên liên kết, với màu được đặt thành màu trắng. Tôi muốn div giữ độ mờ, trong khi văn bản vẫn ở mức độ mờ đục là "1".

Tôi đã thử phương pháp được thảo luận trong một câu hỏi tương tự (CSS - Apply Opacity to Element but NOT To Text Within The Element) nhưng phương pháp này dường như không hoạt động đối với tôi.

Tôi đã đăng bit mã cho liên kết trên JSFiddle tại http://jsfiddle.net/Cwca22/uG5y8/ nếu bạn muốn xem qua nó.

Cảm ơn trước vì tất cả sự trợ giúp.

Answer 1

Nếu bạn đang tìm kiếm một giải pháp CSS tinh khiết, và sẵn sàng thay đổi đánh dấu của bạn một chút, hãy nhìn vào ví dụ này:

http://jsfiddle.net/jJ4MZ/3/

Nó xử lý mỗi "liên kết" dưới dạng kết hợp các yếu tố nền và văn bản riêng biệt, sau đó đặt chúng lên nhau, để chỉ div nền sử dụng tính minh bạch.

Answer 2

Vấn đề cũ mà không có bất kỳ giải pháp chuẩn nào! Đây là điều được biết là không thể với CSS ngày nay. Giải pháp duy nhất tôi biết là sử dụng JS. Sử dụng JS, bạn có thể bắt mousemove của H # bị ảnh hưởng và tạo/vị trí một phần tử. Phần tử 'over' mới này không nên là con của DIV với độ mờ đục 0.2.

Answer 3

Nếu tôi hiểu chính xác bạn, bạn muốn màu nền của div phải trong suốt một phần để hiển thị hình ảnh qua, nhưng giữ cho văn bản mờ đục? Đó là đơn giản: 3

<div style="background-color: rgba(255,255,255,0.5);">Text</div> 

Nếu bạn muốn cung cấp hỗ trợ cho các trình duyệt không cho phép định dạng này, sau đó bạn cần:

<div style="background: #ffffff; background: rgba(255,255,255,0.5);">Text</div> 

Answer 4

Khi tôi viết một jsFiddle cho một vấn đề như thế này. Ở đây là http://jsfiddle.net/A53Py/5/

Tạo thành phần cùng cấp có vị trí hoàn toàn phía sau các phần tử không có độ mờ. Không cần phải nói đó là trình duyệt chéo.

Hy vọng nó giúp