¿Puedo establecer una opacidad sólo para la imagen de fondo de un div?

digamos que tengo

<div class="myDiv">Hi there</div>

Quiero ponerle a background-imagey darle opacityde 0.5– pero quiero que el texto que he escrito tenga total opacidad ( 1).

Si escribiera el CSS así

.myDiv { opacity:0.5 }

todo estará en baja opacidad – y no quiero eso.

Entonces mi pregunta es: ¿Cómo puedo obtener una imagen de fondo de baja opacidad con texto de opacidad total?

Aug 30 '11 16:08 Alon

No, esto no se puede hacer ya que opacityafecta a todo el elemento, incluido su contenido, y no hay forma de alterar este comportamiento. Puede solucionar este problema con los dos métodos siguientes.

división secundaria

Agregue otro divelemento al contenedor para contener el fondo. Este es el método más compatible con todos los navegadores y funcionará incluso en IE6.

HTML

<div class="myDiv">
    <div class="bg"></div>
    Hi there
</div>

CSS

.myDiv {
    position: relative;
    z-index: 1;
}

.myDiv .bg {
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(test.jpg) center center;
    opacity: .4;
    width: 100%;
    height: 100%;
}

Ver caso de prueba en jsFiddle

:antes y ::antes del pseudoelemento

Otro truco consiste en utilizar los pseudoelementos CSS 2.1 :beforeo CSS 3 . El pseudoelemento es compatible con IE desde la versión 8, mientras que el pseudoelemento no es compatible en absoluto. Es de esperar que esto se rectifique en la versión 10.::before:before::before

HTML

<div class="myDiv">
    Hi there
</div>

CSS

.myDiv {
    position: relative;
    z-index: 1;
}

.myDiv:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(test.jpg) center center;
    opacity: .4;
}

Notas adicionales

Debido al comportamiento, z-indexdeberá establecer un índice z para el contenedor y un negativo z-indexpara la imagen de fondo.

Casos de prueba

Ver caso de prueba en jsFiddle:

• Usando CSS 2.1: antes
• Usando CSS 3 :: antes

Aug 30 '2011 09:08 mekwall

CSS

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

HTML

<div> put your div content</div>

Nov 21 '2014 13:11 Harsukh Makwana