Tôi có một nền tảng tốt đẹp trên trang của mình và tôi muốn tiêu đề văn bản của tôi hoạt động như một mặt nạ để cắt qua div chứa của nó và có nền làm họa tiết. Tôi có thể làm điều này trong CSS hay tôi phải mở photoshop?CSS: Tôi có thể sử dụng văn bản làm mặt nạ để hình nền chỉ hiển thị bên trong văn bản không?
hỗ trợ trình duyệt Limited, nhưng background-clip có thể giúp bạn có được hiệu ứng này: http://tympanus.net/Tutorials/ExperimentsBackgroundClipText/ (Nhấn nút Animate cho vui hơn)
Sử dụng SVG bạn có thể làm điều đó như thế này: http://people.opera.com/dstorey/images/newyorkmaskexample.svg (Xem nguồn để xem những gì đang thực sự thực hiện, thấy reference article quá)
Sử dụng một hình ảnh nền và sau đó CSS, bạn có thể làm điều này: http://www.netmagazine.com/tutorials/texturise-web-type-css
có một tài sản trong CSS3 background-clip: text, mặc dù nó không hoạt động ở mọi trình duyệt. Xem here để biết thêm chi tiết.
Như CSS-Tricks cho thấy trong article này, 'hình ảnh đằng sau chữ' có thể được thực hiện như vậy:
h1 {
color: white; /* Fallback: assume this color ON TOP of image */
background: url(images/fire.jpg) no-repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Nhưng nó không được bảo đảm để làm việc trên tất cả các trình duyệt, vì vậy họ đề nghị một vài quanh công việc , như modernizr.
Đây là những gì nó trông giống như khi nó hoạt động:
bạn có thể phải mở photoshop chỉ để cho chúng ta thấy những gì kết quả cuối cùng cần để trông giống như :) –