turning an image into css

前端 未结 8 1792
一生所求
一生所求 2021-01-16 03:59

I have this image (attached). I am not a designer but I do not want to use the image in my app. I heard you can come very close to an image using css. Can someone help me wi

相关标签:
8条回答
  • 2021-01-16 04:56

    It seems that you want a vectorial image. You can use the HTML svg tag to create a polygon:

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
       <polygon points="0,0 100,0 100,40 0,40 20,20"
       style="fill:#46b"/>
     </svg>
    

    http://jsfiddle.net/XDtXV/

    0 讨论(0)
  • 2021-01-16 04:57

    If all you want to do is avoid linking to an external image file you could embed the image in your css or html directly.

    Here's an example:

    <!doctype html>
    <html>
    <head>
       <title>CSS Image Data Example</title>
       <style>
          #imgHolder {
             background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAAvCAYAAACmGYWkAAADs0lEQVR42u2dS2sVSRSAjRoyGh8bNyKIiO+NgiCIOPhaGNQBb1clPggEF53b1bk4I4qIrwvqHxDECeqEpKqu4W5cCIIrt4rPhU9EGVz4REEFh9EZ4+mHN53Ef+B34IObe7t7ceCj6tSp6oxTxn0W/hO+CkMAMMw4ZewpbfwF+eOpfBZZPKIAfBdke1ibIYIsU5E7oI27KV/+Q2IAckGq1er4rq6+X3S3W6Jivz8w7r788IXkAIgg3yMMe5uDnr5FMooclx/uyojyLwkCBClEIklHPLhA6pBqYOwjueB/kgQIUgit6xN0RaZbxh6WCx6SJECQ0TE01LTt9/NzpB45KHXJg8B4ahJAkGIkxbs2dp5cZNKaJEYSQJARsTy80VwKe2fKdOuoXPxYMZIAgowdSTrifincbVVueCB8opkICDKqcN9qBheryB8SUW6pmCVgQJBRS8A3mnVkFwaROyI33s62pZBAQJARfZJUktjuSSVhJAEEGRlrqlcmBt1+voiyjz4JIMiPapJ6fYIu98/SMt3Sxr1RUbpdnoQCghQjiPxckeOYiHJHU5MAgoyNUmhnJnu3smYiNQkgyJg+SRDWFqnI7k+XgNPzJPRJAEFGbnCM7MKscLdXs2YiyQUEaURb5WTLDqlJRJI9MtW6l59zJ8mAIMWRJFsCdkfS8yRscAQE+cF0a3d9dsn4oypy15huAYKMPVDS1FZx09qN3a5ie51EA4IMR1P6EoiyXyFTrBOBcU9INCBIHp17L7cGkd8QxM5Lsf6UBiIgSD5ytFUutZTKbpWIcU4e/koZm7z0gZ4I/PSCNO2UmkNFdrU89LTwnDeiAII0eiCXWtpj/6uMGE54jRyAIIVlXdVj18jD/lRROnKQWECQVI4/6pNKxq8NIjcgD3vByAEIkvc5koNTiRza2Av5tIqEAoKkS7mdA60dFbs0ML5PHvKRfVeAIPnI0bl3oFVVzq9Wsf9LGc/IAQjSqDlMfYqK3XoV+TNy8zsSCAhS6HPontq6wNizWZ/DUpADgiSxa9e5qarcv1luqAXGPaPmAAQp9Dnay25VEDkvU6u3yAEIUnxRXLdbIqNGX1aQc9YcEKTRBMwKcntG6o4PJAsQpCCHjmsr071VvBQOEGT4P0slS7na2I3ZtIq9VYAgjSagDuvTdWQ3JatVwkvOcgCC5HJsCS9OTs5z6OQkYCYHfQ5AkCSSM+TZrlzbm29ZRw6ARJCOyuBS3WN/y6dV75EDoCCIFON/52LwcgWAUXwDOUawyI+Ht4oAAAAASUVORK5CYII=);
             width: 200px;
             height: 47px;
          }
       </style>
    </head>
    <body>
       <h1>Look, Ma, no external links!</h1>
       <div id="imgHolder">&nbsp;</div>
    </body>
    </html>
    

    In this case I used the image data URL for the background-image css property, but you could also use the same URL for the src attribute of an <img> tag.

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