Cách áp dụng độ dốc CSS trên văn bản, từ màu trong suốt đến màu đục:

Question

Chúc mừng!

Tôi là người mới sử dụng CSS/HTML, nhưng tôi muốn áp dụng độ dốc trên văn bản, như trên hình ảnh bên dưới. Làm thế nào tôi có thể thực hiện nó với css?

---

Answer 1

Hãy thử ví dụ này: http://jsbin.com/iwepas/3/ (thử nghiệm trên Firefox 18)

CSS liên quan là trên pseudoelement :after của <article> wrapper tôi đã sử dụng

article { 
    position: relative; 
} 

article:after { 
    position: absolute; 
    bottom: 0; 
    height: 100%; 
    width: 100%; 
    content: ""; 
    background: linear-gradient(to top, 
    rgba(255,255,255, 1) 20%, 
    rgba(255,255,255, 0) 80% 
); 
    pointer-events: none; /* so the text is still selectable */ 
} 

Output

---

---

Xin lưu ý: trên trình duyệt cũ hơn, bạn có thể cần phải sử dụng một từ trong suốt đến mờ đục nền png áp dụng trên pseudoelement trong khi tiền tố cần trình duyệt nhà cung cấp khác cho linear-gradient

Answer 2

Gradient văn bản CSS3 chỉ được hỗ trợ bởi các trình duyệt dựa trên Webkit như Chrome và Safari. Tôi đã sử dụng 3 phương pháp khác nhau. séc fiddle đầu tiên http://jsfiddle.net/sarfarazdesigner/pvU7r/ này Hãy thử điều này

.article{ 
    background: -webkit-linear-gradient(#eee, #333); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
} 

này đang làm việc tốt trong chrome không biết làm thế nào khác trình duyệt phản ứng. Tài liệu tham khảo được lấy từ http://css-tricks.com/snippets/css/gradient-text/