Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.
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;
}
```