All geek questions in one place

Set background image for font color?

Let's say I have the following code:

<span>Hello world!</span>

And the following CSS:

 span{ color:red; }

Can I change a red image to an image? Like url(images/text-bg.png); ? I want to put the texture in my text and decided that I would just make the text a “color” image, but I'm not sure if this can be done using CSS.

+6
source share
5 answers

Yes, svg is possible, you can paste <svg> over one <div> and background image over another <div> , and then apply z-index to <div> . You can use vector applications like illustrator to create svg as you want.

 <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>
+4
source

This is not possible, even with CSS3. Here's an interesting article on text effects that you can use with CSS3.

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

Another option is to use a custom font that suits your needs.

This site has a huge amount of free open source fonts in each format, which is necessary to support all browsers, and even gives you a good demo file to demonstrate how to implement it in CSS. It is also compatible with CSS2.1, which makes it compatible with IE7 +.

http://www.fontsquirrel.com/

+2
source

This works great for me.

 -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: url(your-image.jpg);
+2
source

The text replacement technique for images is a common occurrence for headings and page navigation, but there really aren't any pure cross-browser compatible CSS methods ( this is a good technique, but you should not rely on it).

If you have a finite amount of text to which you want to apply a texture, it is best to simply replace the text with images manually:

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; }
+1
source

it's possible look at this pen here

https://codepen.io/feferonka/pen/eoWLZp

Use this on the parent text:

  background-image: url(url); background-clip: text; -webkit-background-clip: text; color: transparent;
0
source

Source: https://habr.com/ru/post/896341/

More articles:


All Articles