CSS: ¿configura la imagen de fondo con opacidad?


6 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;
}
Question

Entonces, 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); 
}



Acabo de agregar position = absolute, top = 0, width = 100% en #main y establecer 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.




si necesita establecer el degradado solo en la imagen de fondo :

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);



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




Tuve un problema similar y tomé la imagen de fondo con Photoshop y creé un nuevo .png con la opacidad que necesitaba. Problema resuelto sin preocuparse por si mi CSS funcionó en todos los dispositivos y navegadores




Puede usar CSS selector de pseudo :: después para lograr esto. Aquí hay una demostración funcional.

.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 tu CSS agrega ...

 filter: opacity(50%);

En JavaScript, usa ...

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

NB: Agregue prefijos de proveedor según sea necesario pero Chromium debería estar bien sin.




Related



Tags

css css