4

preciso aplicar um color: transparent em um elemento que possui o background-color: #fff. Já tentei aplicar um opacity: 0 mas ele aplica no elemento todo isso, inclusive no background.

meu html atual: <strong>matar a fome</strong>

o objetivo é chegar a este resultado:

inserir a descrição da imagem aqui

3
  • 1
    Infelizmente, por conta da hierarquia, você não vai conseguir a não ser que separe os elementos e posicione posteriormente. Aí você consegue dar esse efeito esperado. Commented 14/11/2017 às 18:49
  • 1
    Pra não perder tempo, joguei uma imagem em .png mesmo. Obrigado da mesma forma! Commented 16/11/2017 às 12:29
  • Cara, é mais fácil utilizar o rgba, o "a" seria a opacidade, apenas do background. Usa assim: background-color: rgba(255,255,255,0.5); Commented 25/08/2018 às 2:26

1 Resposta 1

5

Esse efeito é conhecido como Knockout Text. Fiz esse modelo pra te ajudar como exemplo. Ele funciona bem no Chrome e FF, Mas no IE fica meio buggado para variar...

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

Os artigos que usei como referencia são: https://css-tricks.com/how-to-do-knockout-text/ e http://nimbupani.com/using-background-clip-for-text-with-css-fallback.html

1
  • boa cara! era isso mesmo. Muito obrigado! Commented 23/11/2017 às 16:53

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .