style - texto con fondo de color html

Cómo oscurecer un fondo con CSS?

Question

Tengo un elemento con texto. Cada vez que disminuyo la opacidad, entonces disminuyo la opacidad del cuerpo ENTERO. ¿Hay alguna manera de que pueda oscurecer la background-image 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'');

Answer 1

Para mí, el enfoque de filtro / gradiente no funcionó (tal vez debido al CSS existente), así que lo he usado :before truco de pseudo styling:

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

Answer 2

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>

Answer 3

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

Answer 4

Solo agrega este código a tu imagen css

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: gradiente lineal () - CSS | MDN

ACTUALIZACIÓN: no todos los navegadores admiten RGBa, por lo que debe tener un "color de reserva". Es probable que este color sea sólido (completamente opaco), por ejemplo: background:rgb(96, 96, 96) . Consulte este blog para obtener soporte para el navegador RGBa.

Answer 5

Solo para agregar a lo que ya está aquí, usa 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 gradiente lineal del 70%. Para iluminar la imagen, puede cambiar todos los 0,0,0 ''s en 255,255,255 '' s. Si el 70% es un poco demasiado, adelante y cambie el .7 . Y, para referencia futura, revise esto: http://www.colorzilla.com/gradient-editor/

Answer 6

Utilice un: después del elemento psuedo:

.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 pluma>

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