Wie verdunkle ich einen Hintergrund mit CSS?

99

Ich habe ein Element mit Text. Immer wenn ich die Opazität verringere, verringere ich die Opazität des GANZEN Körpers. Kann ich das background-imageDunkle auf irgendeine Weise dunkler machen 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');
TylerH
quelle

Antworten:

195

Fügen Sie diesen Code einfach 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: linearer Gradient () - CSS | MDN

UPDATE: Nicht alle Browser unterstützen RGBa, daher sollten Sie eine "Fallback-Farbe" haben. Diese Farbe ist höchstwahrscheinlich fest (vollständig undurchsichtig), z background:rgb(96, 96, 96). In diesem Blog finden Sie Informationen zur Unterstützung von RGBa-Browsern.

Schienbein
quelle
Gibt es browserübergreifende Probleme damit?
Jon P
9
Was ist die Eigenschaft, wenn wir das Hintergrundbild separat angeben möchten und dies?
Petruza
2
@ Petruza es scheint, dass wir keine andere Wahl haben, als diese Syntax zu verwenden. Lesen Sie die Referenz : "Da <gradient> zum Datentyp <image> gehören, können sie nur dort verwendet werden, wo <image> s verwendet werden können. Aus diesem Grund funktioniert linear-gradient () nicht für Hintergrundfarben und andere Eigenschaften, die den Datentyp <color> verwenden "
Marco Panichi
18

Verwenden Sie ein: after pseudo-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;
}

Schau dir meinen Stift an>

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

Craig O. Curtis
quelle
Gut, funktioniert aber nicht in Firefox 47.0.1 unter Windows 10. Funktioniert aber mit IE. Haben Sie eine Lösung für Firefox?
John Max
2
@ JohnMax Firefox funktioniert jetzt einwandfrei. Ich muss nur ein paar Jahre warten.
Craig O. Curtis
9

Die Einstellung background-blend-modeauf darkenist der direkteste und kürzeste Weg, um den Zweck zu erreichen. Sie müssen jedoch eine background-colorerste festlegen, damit der Mischmodus funktioniert.
Dies ist auch der beste Weg, wenn Sie die Werte in Javascript später bearbeiten müssen.

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;

Kann ich für Hintergrundmischung verwenden

Helena Bourmault
quelle
1
Edge oder IE11 ist nicht wirklich ein Browser
Stackdave
6

Es könnte möglich sein, dies mit zu tun 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>


quelle
2

Sie können einen Container für Ihren Hintergrund verwenden, der als absoluter und negativer Z-Index platziert wird: 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;
}
Yooz
quelle
2

Verwenden Sie Folgendes, um das zu ergänzen, was bereits vorhanden ist:

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 eines 70% igen linearen Gradienten-Overlays. Um das Bild aufzuhellen, können Sie alle diese 0,0,0in ändern 255,255,255. Wenn 70% etwas viel sind, ändern Sie die .7. Weitere Informationen finden Sie unter: http://www.colorzilla.com/gradient-editor/

Alex Price
quelle
1

Wenn Sie die Hintergrundfarbe heller oder dunkler machen möchten, können Sie diesen CSS-Code verwenden

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

.darker-span {
  filter: brightness(50%);
}
Trung
quelle
Danke, ich wusste nichts über CSS- Filter . Falls es jemandem hilft, hier ist der Status " Kann ich verwenden " (März 2020).
Reed Dunkle
0

Für mich hat der Filter / Gradient-Ansatz nicht funktioniert (möglicherweise aufgrund des vorhandenen CSS), daher habe ich :beforestattdessen einen Pseudo-Styling-Trick 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;
}
Daniel Sokolowski
quelle
Da der Standard displayfür ::beforeist inlinewird es nicht akzeptieren widthund height.
Connexo
Danke @connexo, es sieht so aus, als hätte ich es beim Kopieren der relevanten Stile verpasst.
Daniel Sokolowski