Nói rằng tôi có đoạn mã sau:Đặt hình nền cho màu phông chữ?
<span>Hello world!</span>
Và CSS sau đây:
span{
color:red;
}
Có cách nào tôi có thể thay đổi red đến một hình ảnh? Giống như url(images/text-bg.png);? Tôi muốn đặt một kết cấu trên văn bản của tôi và quyết định rằng tôi sẽ chỉ làm cho văn bản "màu" một hình ảnh, nhưng tôi không chắc chắn nếu điều này có thể được thực hiện với CSS.
có nó có thể sử dụng svg, bạn có thể nhúng <svg> hơn một <div> và nền hình ảnh quakhác, sau đó áp dụng chỉ mục z đến <div>. Bạn có thể sử dụng các ứng dụng Vector như họa sĩ minh họa để tạo svg theo cách bạn muốn.
<html>
<head>
<title>Untitled Document</title>
<style>
html
{
background-image:url('lauch.jpg');
background-repeat:no-repeat;
background-position:center;
padding-top:200px;
}
</style>
</head>
<body>
<div align="center">
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="140px" height="80px" viewBox="0 0 76.25 39.167" enable-background="new 0 0 76.25 39.167" xml:space="preserve">
<text transform="matrix(1 0 0 1 5.9336 30.417)" fill="none" stroke="red" stroke-width="0.25" stroke-miterlimit="10" font-family="'Tahoma'" font-size="36">Text</text>
</div>
</body>
</html>
Điều này là không thể, ngay cả với CSS3. Đây là một bài viết thú vị về các hiệu ứng văn bản mà bạn có thể sử dụng với CSS3.
http://www.catswhocode.com/blog/8-examples-of-stunning-css3-text-effects
Một lựa chọn khác là sử dụng một phông chữ tùy chỉnh mà suites nhu cầu của bạn.
Trang web này có số lượng phông chữ nguồn mở miễn phí ở mọi định dạng cần thiết để hỗ trợ tất cả các trình duyệt, thậm chí nó cung cấp cho bạn một tệp demo tuyệt vời để minh họa cách triển khai nó trong CSS. Điều này tương thích với CSS2.1, làm cho nó tương thích với IE7 +.
Có vẻ như tôi đã đạt được hiệu quả tương tự với ví dụ "ngựa vằn" trong liên kết mà bạn đã chỉ cho tôi. – Charlie
Thật không may, ví dụ đó không thuộc về danh sách đó.Nó không phải CSS3, nó chỉ đơn giản là chỉ sử dụng thay thế hình ảnh như đã đề cập bởi @wex –
Vâng, cộng với nền phải có cùng màu với mẫu. – Charlie
Kỹ thuật trao đổi ra văn bản cho hình ảnh được phổ biến cho tiêu đề và chuyển hướng trang, nhưng có thực sự không phải là bất kỳ kỹ thuật CSS tinh khiết mà qua trình duyệt tương thích (this là một kỹ thuật tốt đẹp, nhưng isn 't một cái gì đó bạn nên dựa vào).
Nếu bạn có một số lượng hữu hạn của văn bản mà bạn muốn áp dụng các kết cấu để, đặt cược tốt nhất của bạn là chỉ cần thay thế các văn bản với hình ảnh bằng tay, như vậy:
HTML:
<h1 class="title">Title</h1>
CSS:
h1.title {
background: url(images/title.gif) 0 0 no-repeat;
width: 80px;
height: 23px;
text-indent: -10000px; }
Đây là điều, tôi muốn có thể thay đổi văn bản mà không cần phải đi vào PS và làm lại tiêu đề. – Charlie
Đúng. Một lần nữa, tôi thực sự chỉ đề nghị kỹ thuật này nếu bạn đang sử dụng nó cho một "số lượng văn bản hữu hạn", và, như bạn đã nói, văn bản có thể được mong đợi là tĩnh. – Wex
Phải, tôi tự hỏi có cách nào khác không. – Charlie
Tôi đang cố gắng để nghĩ rằng nếu có sẽ là một cách để làm điều này bằng opacity; nhưng tôi không nghĩ là có. https://developer.mozilla.org/en/CSS_Reference Nhìn xung quanh ở đó ở dạng văn bản và kiểu phông chữ có sẵn và xem có bất cứ điều gì để thử và có được hiệu ứng bạn đang tìm kiếm mà không cần sử dụng một hình ảnh hay không. – Dave
Bạn có thể tạo ra nó với một chút SVG ... – zzzzBov
có thể trùng lặp của [Với css là nó có thể sử dụng một hình ảnh cho màu văn bản?] (Http://stackoverflow.com/questions/5812236/with- css-is-it-possible-to-use-an-hình ảnh-cho-văn bản-màu) –