transparente html - CSS: establecer imagen de fondo con opacidad?





7 Answers

#main {
    position: relative;
}
#main:after {
    content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(/wp-content/uploads/2010/11/tandem.jpg); 
    width: 100%;
    height: 100%;
    opacity : 0.2;
    z-index: -1;
}
opaco capa utilizando

Por lo tanto, puedo ver en las referencias de CSS cómo establecer la transparencia de la imagen y cómo establecer una imagen de fondo . Pero, ¿cómo puedo combinar estos dos para establecer una imagen de fondo transparente?

Tengo una imagen que me gustaría usar como fondo, pero es demasiado brillante, me gustaría reducir la opacidad a aproximadamente 0,2. ¿Cómo puedo hacer esto?

#main {
    background-image: url(/wp-content/uploads/2010/11/tandem.jpg); 
}



Solución simple

Si necesita establecer el gradiente a la imagen de fondo solamente:

background-image: url(IMAGE_URL); /* fallback for older browsers */

background-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 100%), url(IMAGE_URL);



Puedes usar CSS psuedo selector :: after para lograr esto. Aquí hay una demostración de trabajo.

.bg-container{
  width: 100%;
  height: 300px;
  border: 1px solid #000;
  position: relative;
}
.bg-container .content{
  position: absolute;
  z-index:999;
  text-align: center;
  width: 100%;
}
.bg-container::after{
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index:99;
  background-image: url(https://i.stack.imgur.com/Hp53k.jpg);
  background-size: cover;
  opacity: 0.4;
}
<div class="bg-container">
   <div class="content">
     <h1>Background Opacity 0.4</h1>
   </div>
</div>




En su CSS agregue ...

 filter: opacity(50%);

En uso de JavaScript ...

 element.style.filter='opacity(50%)';

NB: agregue prefijos de proveedor según sea necesario, pero Chromium debería estar bien sin él.




Bueno, la única forma CSS de hacer solo la transparencia de fondo es a través de RGBa pero como quiere usar una imagen, sugeriría usar Photoshop o Gimp para hacer la imagen transparente y luego usarla como fondo.




Acabo de agregar position = absolute, top = 0, width = 100% en #main y establezco el valor de opacidad en #background

#main{height:100%;position:absolute; top:0;width:100%}
#background{//same height as main;background-image:url(image URL);opacity:0.2}

Apliqué el fondo a un div antes del principal.




Tuve un problema similar y simplemente tomé la imagen de fondo con photoshop y creé un nuevo .png con la opacidad que necesitaba. El problema se resolvió sin preocuparse por si mi CSS funcionaba en todos los dispositivos y navegadores




Related


Tags

css