1

Preciso de alguma "dica" sobre como fazer funcionar no pseudo-elemento ::before o content (com imagem, uma foto por exemplo) e um background transparent, tudo na mesma classe. A

lguém sabe como ?

#minha_classe::before {
    position: relative !important;
    content: url(photo.jpg) !important;
    height: auto;
    top: 0%;
    left: 0%;
    margin-left: -50%; /* meio da imagem */ 
    transform: translate(-50%, -50%);

    background-color: rgba(165, 30, 30, 0.7) !important;
    background-size: 100% 100%;
    width: 1000px;
    height: 1000px;  
}
4
  • Você pode ver nessa pergunta que a tag <img> não recebe pseudo-element por ser um elemento do tipo void, ou seja é uma tag que não tem fechamento tipo </img> então a solução seria colocar a imagem dentro de uma div e o pseudo elemento na <div> e não na <img> pt.stackoverflow.com/questions/263040/…
    – hugocsl
    17/04/2018 às 18:40
  • Resumindo não da para por ::before ou ::after direto na tag img, mas vc pode ter uma div com dois backgrounds, um com a imagem e outro com a cor meio transparente por cima, ou usar o pseudo-elemento na div com a imagem no background, se é isso que vc quer posso fazer um exemplo básico pra vc.
    – hugocsl
    17/04/2018 às 18:47
  • Nao entendi, poderia me exemplificar ? Uso apenas uma div ?
    – user33011
    17/04/2018 às 18:51
  • Nao entendi hugocsl, poderia me exemplificar ? pois este exemplo que usei acima é um loader que uso na abertura da pagina web
    – user33011
    17/04/2018 às 18:53

1 Resposta 1

0

Sua pergunta ficou um pouco confusa, mas vamos por partes.

Sim é possível fazer tudo com uma classe apenas e um ::after, tipo #minha_classe e #minha_classe::after

Segundo a tag <img> não aceita pseudo elemento, assim como outras tag que não têm fechamento como os <input>, <hr> etc... vc pode ler mais nessa pergunta Os pseudo elementos ::after e ::before funcionam em quais input types

Agora vamos ao exemplo dentro do que eu entendi da pergunta e lendo os comentários...

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

#minha_classe {
    position: relative;
    background-image: linear-gradient(rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.75) 100%), url(http://placecage.com/200/200);
    background-size: cover;
    background-position: center;
    height: 100%;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#minha_classe::after {
    content: "";
    background-image: url(https://thumbs.gfycat.com/MatureBestBlackbear-max-1mb.gif);
    background-size: cover;
    position: absolute;
    height: 100px;
    width: 100px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
<div id="minha_classe"></div>

2
  • hugocsl, funcionou conforme vc passou, muito obrigado ! Eu estava realizando um #minha_classe::before e um #minha_classe::after, mas nao colocando a classe em si, sem o pseudo-elemento. Isso já ajudou no entendimento. Mas o que eu achei show foi o linear gradient junto com a url no background-image, jamais eu iria saber que o background-image realiza esta tarefa. Funcionou perfeitamente! Exemplo muito bom esse seu ! muito obrigado !
    – user33011
    18/04/2018 às 12:53
  • @EitaEhNOiz essa dica vale ouro né rss. Se a minha resposta te ajudou de alguma forma considere marca-la como Aceita, nesse ícone ✔ abaixo das setinhas no lado esquerdo da minha resposta :) assim o site não fica com perguntas abertas pendentes sem resposta aceita.
    – hugocsl
    18/04/2018 às 13:08

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