Histórico da Página
HTML |
---|
{html}<a href="http://www.atlassian.com">Click here</a> to see the <b>Atlassian</b> website.{html}Claro! Abaixo está um exemplo de código em HTML e CSS para inserir a imagem estilizada com bordas arredondadas, ligeiramente escura e borrada, com texto centralizado em cima e a opção de acrescentar uma logo no formato PNG ao lado do texto. HTML: ```html <div class="image-container"> <img src="chttps://s2-techtudo.glbimg.com/L9wb1xt7tjjL-Ocvos-Ju0tVmfc=/0x0:1200x800/984x0/smart/filters:strip_icc()/i.s3.glbimg.com/v1/AUTH_08fbf48bc0524877943fe86e43087e7a/internal_photos/bs/2023/q/l/TIdfl2SA6J16XZAy56Mw/canvaai.png" alt="Imagem" class="background-image"> <div class="overlay"> TESTANDO 123 <img src="caminho_para_a_logo.png" alt="Logo" class="logo-image"> </div> </div> ``` CSS: ```css .image-container { position: relative; display: inline-block; border-radius: 10px; overflow: hidden; } .background-image { display: block; width: 100%; filter: blur(3px); opacity: 0.9; } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .image-text { font-family: "Lato", sans-serif; color: white; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); margin-bottom: 10px; } .logo-image { max-width: 100%; max-height: 100px; margin-top: 10px; } ``` |
Visão Geral
Import HTML Content
Conteúdo das Ferramentas
Tarefas