¿Cómo oscurecer un fondo usando CSS?

Tengo un elemento con texto. Siempre que disminuyo la opacidad, disminuyo la opacidad de TODO el cuerpo. ¿Hay alguna forma de que pueda hacer el background-imagemás oscuro y no todo lo demás?

background-image:url('http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png');

Simplemente agregue este código a su imagen css

 body{
 background:
        /* top, transparent black, faked with gradient */ 
        linear-gradient(
          rgba(0, 0, 0, 0.7), 
          rgba(0, 0, 0, 0.7)
        ),
        /* bottom, image */
        url(http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png);
    }

Referencia: linear-gradient () - CSS | MDN

ACTUALIZACIÓN: No todos los navegadores son compatibles con RGBa, por lo que debería tener un 'color alternativo'. Este color será más probable es que sea sólido (totalmente opaco) ex: background:rgb(96, 96, 96). Consulte este blog para conocer la compatibilidad con el navegador RGBa.

Utilice un: después de psuedo-elemento:

.overlay {
    position: relative;
    transition: all 1s;
}

.overlay:after {
    content: '\A';
    position: absolute;
    width: 100%; 
    height:100%;
    top:0; 
    left:0;
    background:rgba(0,0,0,0.5);
    opacity: 1;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}
.overlay:hover:after {
    opacity: 0;
}

Mira mi bolígrafo>

http://codepen.io/craigocurtis/pen/KzXYad

Establecer background-blend-modeen darkensería la forma más directa y más corta de lograr el propósito, sin embargo, debe establecer una background-colorprimera para que funcione el modo de fusión.
Esta también es la mejor manera si necesita manipular los valores en javascript más adelante.

background: rgba(0, 0, 0, .65) url('http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png');
background-blend-mode: darken;

¿Puedo usar para una mezcla de fondo

Podría ser posible hacer esto con box-shadow

sin embargo, no puedo hacer que se aplique realmente a una imagen. Solo en fondos de color sólido

body {
  background: #131418;
  color: #999;
  text-align: center;
}
.mycooldiv {
  width: 400px;
  height: 300px;
  margin: 2% auto;
  border-radius: 100%;
}
.red {
  background: red
}
.blue {
  background: blue
}
.yellow {
  background: yellow
}
.green {
  background: green
}
#darken {
  box-shadow: inset 0px 0px 400px 110px rgba(0, 0, 0, .7);
  /*darkness level control - change the alpha value for the color for darken/ligheter effect */
}

Red
<div class="mycooldiv red"></div>
Darkened Red
<div class="mycooldiv red" id="darken"></div>
Blue
<div class="mycooldiv blue"></div>
Darkened Blue
<div class="mycooldiv blue" id="darken"></div>
Yellow
<div class="mycooldiv yellow"></div>
Darkened Yellow
<div class="mycooldiv yellow" id="darken"></div>
Green
<div class="mycooldiv green"></div>
Darkened Green
<div class="mycooldiv green" id="darken"></div>

Puede usar un contenedor para su fondo, colocado como índice z absoluto y negativo: http://jsfiddle.net/2YW7g/

HTML

<div class="main">
    <div class="bg">         
    </div>
    Hello World!!!!
</div>

CSS

.main{
    width:400px;
    height:400px;
    position:relative;
    color:red;
    background-color:transparent;
    font-size:18px;
}
.main .bg{
    position:absolute;
      width:400px;
    height:400px;
    background-image:url("http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png");
    z-index:-1;
}

.main:hover .bg{
    opacity:0.5;
}

Solo para agregar a lo que ya está aquí, use lo siguiente:

background: -moz-linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7));
background: -webkit-linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7));
background: linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7));
filter: unquote("progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3000000', endColorstr='#b3000000',GradientType=0 )");

... para compatibilidad con varios navegadores de una superposición de degradado lineal al 70%. Para iluminar la imagen, puede cambiar todas esas 0,0,0'por 255,255,255'. Si el 70% es demasiado, continúe y cambie el .7. Y, para referencia futura, consulte esto: http://www.colorzilla.com/gradient-editor/

cuando desee un color de fondo más brillante o más oscuro, puede usar este código css

.brighter-span {
  filter: brightness(150%);
}

.darker-span {
  filter: brightness(50%);
}

Para mí, el enfoque de filtro / degradado no funcionó (tal vez debido al CSS existente), así que he usado un :beforetruco de pseudo estilo en su lugar:

.eventBannerContainer {
    position: relative;
}
.eventBannerContainer:before {
    background-color: black;
    height: 100%;
    width: 100%;
    content: "";
    opacity: 0.5;
    position: absolute;
    display: block;
}
/* make any immediate child elements above our darkening mask */
.eventBannerContainer > * {
    position: relative;
}