Tôi có một div có độ mờ là 60%, để hiển thị một phần của hình nền phía sau div. Bởi vì độ mờ là 60%, văn bản trong div đó xuất hiện dưới dạng màu xám.CSS - Văn bản mờ đục trên div độ mờ thấp?
Có cách nào để ghi đè cấp này và làm cho văn bản xuất hiện màu đen không?
Bất kỳ lời khuyên nào được đánh giá cao.
Cảm ơn.
Đặt độ mờ trên nền thay vì phần tử.
background-color: rgba(255,0,0,0.6);
Cách đây một giờ tôi đã viết về cách achieve this in a backwards compatible way.
Độ mờ áp dụng cho toàn bộ div và tất cả các con của nó. Thật không may, bạn không thể hoàn tác độ mờ đó, nhưng chỉ thêm nhiều hơn nữa. Và bên cạnh đó, không có cách nào để CSS chọn văn bản bên trong một phần tử.
Trong trường hợp của bạn, giải pháp tốt nhất là áp dụng hình nền trong suốt (có PNG) cho khối div của bạn, như hình ảnh một pixel màu trắng có độ mờ đục 60%.
Một giải pháp khác là sử dụng các hộp và vị trí khác nhau, như được mô tả trong this tutorial by Steven York.
này nên trả lời chỉ là về tất cả các câu hỏi của bạn: http://css-tricks.com/non-transparent-elements-inside-transparent-elements/
Giải pháp đơn giản nhất là tạo ra một PNG bán trong suốt với màu sắc chính xác và sử dụng làm hình nền.
Một giải pháp khác có thể có thể tùy thuộc vào bố cục của bạn là đặt văn bản vào một lớp và vị trí riêng biệt trên đầu phần bán trong suốt. Một cái gì đó như thế này sẽ làm việc:
<div style="position: relative; background-image: url('your_image.jpg')">
<div style="opacity: 0.5; background-color: #fff; position: absolute"></div>
<div style="position: absolute">The text to go on top</div>
</div>
Bạn sẽ cần phải thêm các vị trí riêng của mình/kích thước (các top, left, width và height tài sản) cho phù hợp.
Tôi đã thử nghiệm điều này trong quá khứ trên trang web của riêng mình. Cho đến nay, phương pháp dễ nhất để đạt được những gì bạn muốn là tạo một hình ảnh .PNG đơn pixel với độ mờ được đặt thành nhỏ hơn 100% (tức là một phần trong suốt) và sử dụng nó làm hình nền. Theo mặc định, nó sẽ lấp đầy toàn bộ phần tử chứa - đảm bảo rằng thuộc tính CSS background-repeat được đặt thành 'lặp lại' nếu nó không có.
Làm theo cách này bạn không phải đặt độ trong suốt trên chính phần tử chứa, do đó độ mờ của văn bản sẽ không bị ảnh hưởng.
Thật ngạc nhiên, chỉ có công cụ tạo một pixel đơn trong suốt .PNG here.
IE7 và IE8 có hỗ trợ PNG trong suốt không? –
rock sir, bạn làm. –
Điều này không hiệu quả đối với tôi. Tại sao? –