CSS após a imagem
Este tutorial mostrará como adicionar uma sobreposição de imagem usando o pseudo-elemento "depois" no CSS. Adicionaremos o efeito de sobreposição da imagem com a ajuda do pseudo-elemento "depois".
Exemplo 1:
Para usar o pseudo-elemento "depois" no CSS, criamos um arquivo html. O código que escrevemos no arquivo html é fornecido neste exemplo. Você pode usar o editor de texto que deseja e começar a codificar nele. Escreva o código apresentado na imagem a seguir. Escrevemos este código no software de código do Visual Studio. Ao selecionar o idioma HTML neste novo arquivo, apenas escrevemos “!”. Pressione Enter então as tags necessárias aparecerão automaticamente neste arquivo. Comece a codificar em seu corpo.
Criamos uma classe de "seção" chamada "Banner" e colocamos um título dentro desse "banner". Também vinculamos este HTML ao arquivo CSS, então todos os estilos que fazemos no arquivo CSS serão aplicados a este código HTML. Nós o salvamos com o “.Extensão de arquivo html ”.
Código CSS:
Neste código CSS, usamos o pseudo-elemento "depois" para criar a sobreposição de imagem. Para o pseudo-elemento "depois", devemos ter o conteúdo, então colocamos o "conteúdo" aqui. Criamos um elemento dentro do "banner" após o conteúdo do banner. Agora, fazemos o "bloco" de "exibição" e damos a "posição" a esse banner como "absoluto". O "top" e "esquerda" são "0". Em seguida, definimos a "largura" como "100%" da mesma forma que a "altura" com o valor "100%". Usamos o "gradiente linear" para a "imagem de fundo" para tornar a imagem mais atraente. Damos um "120DEG" a isso e colocamos duas cores nesta propriedade. Então, definimos sua "opacidade" e colocamos o "0.Valor de 7 ”para isso. Usamos o valor do índice z aqui e colocamos "0" para isso.
Em seguida, definimos a posição do "banner" para "parente". Também usamos a imagem de fundo dentro do banner. O "preenchimento" que definimos para isso é "20VH" para "top" e "inferior", e "0" para o "esquerda" e "direita". Definimos a "capa" para o "tamanho de fundo" e o "alinhamento de texto" para o "centro". Agora, usamos o banner e selecionamos todos os elementos do banner usando o seletor "*". Quando usamos esse seletor "*", ele obtém todos os elementos e aplica o estilo que colocamos dentro dele em todos os elementos. Como nossa sobreposição cobre o texto e a imagem, usamos o "Z-Index" para resolver isso e definimos o conteúdo "Z-Index" como "10". E defina o "parente" para sua "posição".
Definimos a cor do conteúdo como "preto" para que o conteúdo escrito dentro do banner pareça preto na imagem. Nós "alinhamos" o cabeçalho "ao" centro "e usamos a fonte" argelina "para este título. Além disso, definimos seu tamanho como "40px".
Saída:
Você pode obter a saída no navegador padrão ao pressionar o "Alt+B" ou clicar no botão direito do mouse no arquivo html e selecionar o "Abra no navegador padrão". A saída fornecida será renderizada no navegador.
Exemplo #2:
Aqui, temos outro exemplo em que criamos a sobreposição da imagem usando o mesmo pseudo-elemento e alteramos um pouco nosso código e mostramos como funciona.
O código HTML é o mesmo para este exemplo. Mas aqui, mudamos o cabeçalho que está escrito dentro do banner. Nós separamos esse caminho para duas linhas usando o “
" marcação.
Primeiro, definimos um pouco a cabeça aplicando algumas propriedades de estilo. Definimos o "alinhamento de texto", "tamanho de fonte" e "font-família" do cabeçalho. Então, vem o pseudo-seletor "depois", que cria uma sobreposição entre a imagem e o texto. Sempre que usamos esse seletor "depois" no CSS, devemos definir o "conteúdo" primeiro. Depois disso, definimos sua "exibição" como "Block". Os valores "top" e "esquerda" que colocamos aqui estão definidos como "0". Enquanto os valores de "largura" e "altura" são definidos como "100". Em seguida, aplicamos o "gradiente linear" e selecionamos duas cores para isso que é "rosa" e "azul". Além disso, a propriedade de "opacidade" é usada aqui para dar uma visão transparente da imagem de fundo. Definimos seu valor como “0.6 ”. Usamos o “cenário de fundo.jpg ”como a imagem de fundo para isso. Colocamos esse nome de imagem na propriedade “Background-Image” “URL”.
Em seguida, usamos o preenchimento para criar o espaço e definir seus valores “top”, “inferior”, “direita” e “esquerda” usando uma propriedade “preenchimento”. Aqui, o “200VH” define o preenchimento “top” e “inferior” e o “0” define o preenchimento “esquerda” e “direita”. O "tamanho de fundo" é "capa" como usamos em nosso primeiro exemplo. Em seguida, definimos o "banner" e "z-index". Para isso, primeiro usamos o pseudo-elemento "depois". Dentro disso, definimos o "-Index" como "1". Dá um índice Z "1" para a sobreposição. Abaixo disso, definimos o "Z-Index" para o "Conteúdo" e aplicamos "10" para o conteúdo Z-Index. Utilizamos o seletor "*" com o "banner" antes de dar um Z-Index ao conteúdo do banner. Este Index Z se aplica a todo o conteúdo escrito no banner. Também usamos o "modo misturado" para a sobreposição que criamos anteriormente. Esta propriedade "Mix-Blend-Mode" ajuda a misturar os vários elementos.
Quando usamos esta propriedade com nossa sobreposição, ela cria algumas novas combinações incríveis para nós. Podemos tornar nossa sobreposição uma sobreposição avançada usando esta "protuia de mistura de mistura" no CSS. Depois de concluir este código, devemos salvá -lo com um “.Extensão do arquivo CSS ”, pois é o arquivo CSS.
Saída:
Conclusão
Discutimos o pseudo-elemento "depois" no CSS para fazer a imagem de sobreposição neste tutorial. Aprendemos que a sobreposição é criada entre a imagem de fundo e o texto para que possamos selecionar o texto, o que significa que o texto é separado da imagem. Usamos a “propriedade misturada” nessas sobreposições de imagem para torná-las mais atraentes. Também exploramos os diferentes exemplos e explicamos esses exemplos neste tutorial. Fornecemos todos os detalhes neste tutorial necessário para você entender isso "depois" pseudo-elemento no CSS. Agora, você pode criar essas sobreposições em seus projetos depois de entender esses exemplos que o ajudarão muito em sua futura codificação.