Imagenes con CSS: 👨‍💻 Texto de imagen

Añade texto a una imagen en la esquina de tu preferencia:

$ejemplo$

Bottom Right. Acá tu mensaje

Top Left Acá tu mensaje

Top Right Acá tu mensaje

Bottom Left Acá tu mensaje

Centered Acá tu mensaje

El código es:

.bottomright {
  position: absolute;
  bottom: 10px;
  right: 6px;
  font-size: 18px;
}

.topleft {
  position: absolute;
  top: 8px;
  left: 16px;
  font-size: 18px;
}
  
 .topright {
  position: absolute;
  top: 8px;
  right: 16px;
  font-size: 18px;
}  
 .bottomleft {
  position: absolute;
  bottom: 8px;
  left: 16px;
  font-size: 18px;
}
  .center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
}  
img.tex { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>
<p>Añade texto a una imagen en la esquina de tu preferencia:</p>

<div class="container">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHjZGqPrrBkdLuzaZdGUtLhvBFCNrmLEcWftKGAQbO-W3D8LpFTW2E_o6sDWubpOW8nnI5dGBjGvrO489fBp8_VpRlXbklguBdZ4zd5KayKijUW7-rG4oRjj30bqLU7fIQYqCN2X9_3vFK/s0/color+rojo.PNG"   class="tex" alt="ejemplo" width="150px" height="100px">
  <div class="bottomright">Bottom Right. Acá tu mensaje</div>
  <div class="topleft">Top Left Acá tu mensaje</div>
   <div class="topright">Top Right Acá tu mensaje</div>
   <div class="bottomleft">Bottom Left Acá tu mensaje</div>
  <div class="center">Centered Acá tu mensaje</div>
</div>

Fuente. https://www.w3schools.com/css/css3_images.asp

Imagenes con CSS

Contenido

Seguidores del Blog

Labels

lunes, 15 de febrero de 2021

👨‍💻 Texto de imagen

Mira tu VISITA