Set background image for font color?

后端 未结 5 889
半阙折子戏
半阙折子戏 2020-12-15 12:34

Say I have the following code:

Hello world!

And the following CSS:

span{
color:red;
}
相关标签:
5条回答
  • 2020-12-15 13:15

    The technique of swapping out text for images is common for headers and page navigation, but there really aren't any pure CSS techniques that are cross-browser compatible (this is a nice technique, but isn't something you should rely on).

    If you have a finite amount of text that you want to apply the texture to, your best bet is to just replace the text with images manually, as such:

    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; }
    
    0 讨论(0)
  • 2020-12-15 13:16

    This works perfectly fine for me

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: url(your-image.jpg);
    
    0 讨论(0)
  • 2020-12-15 13:23

    Yes it's possible using svg , you can embed <svg> over one <div> and background image over another <div>, later apply z-index to <div>. You can use Vector applications like illustrator to create the svg the way 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>
    
    0 讨论(0)
  • 2020-12-15 13:33

    it is possible, take a look at this pen here

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

    Use this on parent of text:

      background-image: url(url);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
    
    0 讨论(0)
  • 2020-12-15 13:35

    This is not possible, not even with CSS3. Here's an interesting article on text effects 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 which suites your needs.

    This site has an amazing amount of free open-source fonts in every format needed to support all browsers, it even gives you a nice demo file to demonstrate how to implement it in CSS. This is compatible with CSS2.1 as well, making it IE7+ compatible.

    http://www.fontsquirrel.com/

    0 讨论(0)
提交回复
热议问题