it-swarm.com.de

Wie kann ich einen Hintergrund mit CSS abdunkeln?

Ich habe ein Element mit Text. Immer wenn ich die Opazität verringere, verringere ich die Opazität des GANZEN Körpers. Gibt es eine Möglichkeit, wie ich das background-image dunkler und nicht alles andere?

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

Fügen Sie einfach diesen Code Ihrem Bild-CSS hinzu

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

Referenz: linear-gradient () - CSS | MDN

UPDATE: Da nicht alle Browser RGBa unterstützen, sollten Sie eine "Fallback-Farbe" verwenden. Diese Farbe wird höchstwahrscheinlich einfarbig (vollständig undurchsichtig) sein, z. B .: background:rgb(96, 96, 96). In diesem Blog finden Sie Informationen zur Unterstützung von RGBa-Browsern.

158
shin

Benutze ein: after psuedo-Element:

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

Schauen Sie sich meinen Stift an>

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

18
Craig O. Curtis

Einstellung background-blend-mode zu darken wäre der direkteste und kürzeste Weg, um den Zweck zu erreichen, Sie müssen jedoch ein background-color, damit der Mischmodus funktioniert.
Dies ist auch der beste Weg, um die Werte später in Javascript zu bearbeiten.

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

Möglicherweise können Sie dies mit box-shadow

Ich kann es jedoch nicht dazu bringen, es tatsächlich auf ein Bild anzuwenden. Nur auf einfarbigen Hintergründen

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>
4
user7234396

Sie können einen Container als absoluten und negativen Z-Index für Ihren Hintergrund verwenden: 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;
}
2
Yooz

Verwenden Sie zum Hinzufügen zu dem, was bereits vorhanden ist, Folgendes:

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

... für die browserübergreifende Unterstützung einer Überlagerung mit 70% linearem Farbverlauf. Um das Bild aufzuhellen, können Sie alle diese 0,0,0 ist in 255,255,255 's. Wenn 70% etwas viel sind, ändern Sie das .7. Schauen Sie sich dies für zukünftige Referenz an: http://www.colorzilla.com/gradient-editor/

2
Alex Price

Bei mir hat der Filter/Gradienten-Ansatz nicht funktioniert (möglicherweise aufgrund des vorhandenen CSS), daher habe ich stattdessen den Pseudo-Styling-Trick :before Verwendet:

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