Saltar al contenido

ejemplo de código CSS transparente div

Luego de de esta extensa recopilación de datos pudimos solucionar este asunto que tienen ciertos los lectores. Te ofrecemos la solución y esperamos servirte de gran apoyo.

Ejemplo 1: CSS cómo hacer que el fondo sea transparente

/* Use RGBA */
background-color:rgba(255,255,0,0.75);/* Transparent Yellow */

Ejemplo 2: ejemplo de opacidad css

.opacity30 
  opacity:0.3;
  filter:alpha(opacity=30);/* For IE8 and earlier */

Ejemplo 3: color de fondo con opacidad

h1 background-color:rgba(255,0,0,0.3);

Ejemplo 4: CSS de fondo transparente

div 
  width: 200px;
  height: 200px;
  display: block;
  position: relative;

div::after 
  content:"";
  background:url(image.jpg);
  opacity:0.5;
  top:0;
  left:0;
  bottom:0;
  right:0;
  position: absolute;
  z-index:-1;

Ejemplo 5: opacidad de la imagen en html

img 
  opacity:0.5;

Ejemplo 6: tener un div transparente en una imagen html

<html><head><style type="text/css">
      div.imageSub  position: relative;div.imageSub img  z-index:1;div.imageSub div 
        position: absolute;
        left:15%;
        right:15%;
        bottom:0;
        padding: 4px;
        height: 16px;
        line-height: 16px;
        text-align: center;
        overflow: hidden;div.imageSub div.blackbg 
        z-index:2;
        background-color: #000;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
        filter:alpha(opacity=50);
        opacity:0.5;div.imageSub div.label 
        z-index:3;
        color: white;</style></head><body><div class="imageSub" style="width: 300px;"><!-- Put Your Image Width --><img src="image.jpg" alt="Something"/><div class="blackbg"></div><div class="label">Label Goes Here</div></div></body></html>

Si posees alguna perplejidad o capacidad de medrar nuestro crónica eres capaz de ejecutar una ilustración y con gusto lo estudiaremos.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *