Background-color and transparent color text

Asked

Viewed 2,391 times

4

need to apply a color: transparent in an element that has the background-color: #fff. I’ve tried applying one opacity: 0 but it applies to the whole element, including the background.

my current html: <strong>matar a fome</strong>

the goal is to achieve this result:

inserir a descrição da imagem aqui

html css
  • 1

    Unfortunately, because of the hierarchy, you will not succeed unless you separate the elements and position later. Then you can give that expected effect.

  • 1

    In order not to waste time, I played a picture in . png. Thanks in the same way!

  • Face, it is easier to use the rgba, the "a" would be the opacity, only of the background. Uses thus: background-color: rgba(255,255,255,0.5);

1 answer

5


This effect is known as Knockout Text. I made this template to help you as an example. It works well on Chrome and FF, but on IE gets a little buggy for a change...

Follow the CSS / HTML

div {
    width: 300px;
    height: 300px;
    position: relative;
    display: flex;
    background-image: url(http://placecage.com/300/300);
    background-position: center;
    background-repeat: no-repeat;
    margin: 10px auto;
}
div::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #000;
    width: 90%;
    height: 100px;
    margin: auto;
}
h1 {
    text-align: center;
    color: #fff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: url(http://placecage.com/300/300);
    background-position: center;
    background-repeat: no-repeat;
    margin: auto;
    font-size: 42px;
    font-family: sans-serif;
    font-weight: bold;
    padding: 0;
    z-index: 1;
}
h1::after {
    content: attr(data-title);
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
    background-image: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 80%);
}
<div>
    <h1 data-title="Knockout">Knockout</h1>
</div>

The articles I used as a reference are: https://css-tricks.com/how-to-do-knockout-text/ and http://nimbupani.com/using-background-clip-for-text-with-css-fallback.html

  • good guy! That’s right. Thank you very much!

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.