2014-04-22 5 views
61

Ich habe ein Element mit Text drin. Immer wenn ich die Deckkraft verringere, nehme ich die Deckkraft des GANZEN Körpers ab. Gibt es eine Möglichkeit, ich kann nur die background-image dunkler machen, und nicht alles andere?Wie verdunkle ich einen Hintergrund mit CSS?

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

Warum diese jquery markiert? Es hat nichts mit jQuery zu tun. –

Antwort

124

Nur diese hinzufügen Code zu Ihrem Bild 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); 
} 

Referenz: linear-gradient() - CSS | MDN

UPDATE: Nicht alle Browser unterstützen RGBa, so dass Sie einen 'Rückfall Farbe' haben sollte. Diese Farbe wird höchstwahrscheinlich fest (vollständig opak) sein, zB: background:rgb(96, 96, 96). Siehe hierzu blog für die Unterstützung von RGBa-Browsern.

+0

Irgendwelche Cross-Browser Probleme damit? –

+6

Was ist die Eigenschaft, wenn wir Hintergrundbild separat angeben wollen und dies? – Petruza

2

Sie einen Container für Ihren Hintergrund verwenden können, platziert als absoluter und negativen z-index: 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

Nur um zu dem, was schon da ist, verwenden Sie die folgenden Schritte aus:

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 Cross-Browser-Unterstützung von einer 70% igen linearen Gradienten-Overlay. Um das Bild zu erhellen, können Sie alle 0,0,0 in 255,255,255 ändern. Wenn 70% ein bisschen zu viel ist, gehen Sie voran und ändern Sie die .7. Und überprüfen Sie für die Zukunft aus dieser: http://www.colorzilla.com/gradient-editor/

15

eine Verwendung: nach 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; 
} 

Check out my pen>

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

+1

Du bist mein Held! –

+0

Gut, aber nicht in Firefox 47.0.1 auf Windows 10 funktioniert. Aber funktioniert mit IE. Hast du irgendeine Lösung für Firefox? –

0

Für mich ist der Filter/Gradient Ansatz nicht funktioniert (vielleicht aufgrund der vorhandenen CSS), so habe ich :before Pseudo-Styling-Trick stattdessen 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

Da die Standardanzeige für ':: before'' inline' ist, wird 'width' und' height' nicht akzeptiert. – connexo

+0

Danke @connexo, sieht aus wie ich es beim Kopieren der relevanten Stile verpasst habe. –

0

Es könnte möglich sein, dies jedoch mit box-shadow

zu tun, ich kann es nicht bekommen, um tatsächlich auf ein Bild anwenden. Nur auf Normallackhintergründe

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>