Comment assombrir un fond en utilisant CSS?

J’ai un élément avec du texte. Chaque fois que je diminue l’opacité, je diminue l’opacité du corps entier. Y a-t-il un moyen de rendre l’ background-image plus sombre, et pas tout le rest?

 background-image:url('http://soffr.miximages.com/html/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png');

Ajoutez simplement ce code à votre image 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); }

Référence: linear-gradient () – CSS | MDN

MISE À JOUR: Tous les navigateurs ne prennent pas en charge RGBa, vous devriez donc avoir une «couleur de repli». Cette couleur sera très probablement solide (complètement opaque) ex: background:rgb(96, 96, 96) . Reportez-vous à ce blog pour connaître la prise en charge du navigateur RGBa.

Utilisez un élément suivant:

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

Découvrez mon stylo>

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

Vous pouvez utiliser un conteneur pour votre arrière-plan, placé en tant qu’index z absolu et négatif: http://jsfiddle.net/2YW7g/

HTML

   
 Hello World!!!!

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://soffr.miximages.com/html/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png"); z-index:-1; } .main:hover .bg{ opacity:0.5; }

Juste pour append à ce qui est déjà là, utilisez ce qui suit:

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

… pour la prise en charge de plusieurs couches d’un dégradé linéaire à 70%. Pour éclairer l’image, vous pouvez changer tous ces 0,0,0 en 255,255,255 . Si 70% est un peu trop, allez-y et changez le .7 . Et, pour référence future, consultez ceci: http://www.colorzilla.com/gradient-editor/

Il pourrait être possible de le faire avec une box-shadow

Cependant, je n’arrive pas à l’appliquer à une image. Seulement sur des fonds de couleur unie

 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 
 Darkened Red 
 Blue 
 Darkened Blue 
 Yellow 
 Darkened Yellow 
 Green 
 Darkened Green

Pour moi, l’approche filter / gradient n’a pas fonctionné (peut-être à cause du CSS existant), j’ai donc utilisé :before pseudo style astuce à la place:

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