style - texto con fondo de color html
Cómo oscurecer un fondo con CSS? (6)
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;
}
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'');
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 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.
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/
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>