Yazı tipi rengi için arka plan resmi ayarla

Aşağıdaki kodu aldığımı varsayalım:Yazı tipi rengi için arka plan resmi ayarla

<span>Hello world!</span>

Aşağıdaki CSS:

span{ 
color:red; 
}

red görüntü değiştirebilmem için herhangi bir yolu var mı? Xzx17 gibi mi? Metnimin üzerine bir doku koymak ve yazıyı "renk" haline getirmeye karar verdim, ancak bunun CSS ile yapılıp yapılamayacağından emin değilim.

kaynak

2011-08-31 Charlie

; ama sanırım yok. https://developer.mozilla.org/en/CSS_Reference Metin ve yazı tipi stilleri için buralara bakın ve bir resim kullanmadan aradığınız etkiyi denemek için bir şey olup olmadığını görün. – Dave

Birazdan SVG ... – zzzzBov

olası bir kopyasını üretebilirsiniz. [Css ile metin rengi için bir görüntü kullanmak mümkün mü?] (Http://stackoverflow.com/questions/5812236/with- css-is-it-kullanımı-bir-resim-için-metin-renk) –

Evet bu svg kullanarak mümkündür, başkaüzerinde <svg> görüntü <div> biri üzerinde ve arka plan gömebilirsiniz, daha sonra z-endeksini <div>'a uygulayın. Svg'yi istediğiniz şekilde oluşturmak için Illustrator gibi Vector uygulamalarını kullanabilirsiniz. Bunu kullanarak opaklığı yapmanın bir yolu olurdu Eğer düşünmeye çalışıyorum

<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>

kaynak

2012-06-13 16:02:11 akthktd

Bu, CSS3 ile bile mümkün değildir. İşte CSS3 ile kullanabileceğiniz metin efektleri hakkında ilginç bir yazı.

http://www.catswhocode.com/blog/8-examples-of-stunning-css3-text-effects

Diğer bir seçenek ihtiyaçlarınızı suit özel bir yazı tipi kullanmaktır.

Bu site, tüm tarayıcıları desteklemek için gereken her formatta inanılmaz miktarda ücretsiz açık kaynaklı yazı tipine sahiptir, hatta CSS'de nasıl uygulanacağını göstermek için size güzel bir demo dosyası verir. Bu, IE7 + uyumlu hale getirerek CSS2.1 ile de uyumludur.

http://www.fontsquirrel.com/

kaynak

2011-08-31 18:36:24

Bana gösterdiğin bağlantıdaki "zebra" örneğiyle aynı etkiyi elde ettiğim anlaşılıyor. – Charlie

Maalesef bu örnek o listeye ait değil.CSS3 değil, sadece @ wex –

Evet tarafından belirtildiği gibi görüntü değiştirme kullanır, artı arka plan deseni ile aynı renkte olması gerekir. – Charlie

görüntüler için metni takas tekniği başlıkları ve sayfa gezinme için yaygındır, ama gerçekten uyumlu çapraz tarayıcı hiçbir saf CSS teknikleri (this güzel tekniktir, ancak orada değil değil mi güvenmen gereken bir şey değil.

Eğer, en iyi bahis sadece gibi, elle görüntülerle metni değiştirmek için Dokuyu uygulamak istediğiniz metin sınırlı miktarda varsa:

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; }

kaynak

2011-08-31 20:22:27 Wex

İşte, PS'ye girmek zorunda kalmadan metni değiştirebilmek ve başlığını yeniden yazabilmek istiyorum. – Charlie

Doğru. Yine de, bu tekniği sadece "sınırlı miktarda metin" için kullanıyorsanız ve statik olarak beklenebilecek bir metin için tavsiye ediyorum. – Wex

Doğru, başka yolları varsa merak ediyorum. – Charlie

Yazı tipi rengi için arka plan resmi ayarla

cevap

İlgili konular