Comment assombrir un arrière-plan en utilisant CSS?


100

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

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

Réponses:


196

Ajoutez simplement ce code à votre image css

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

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 secours». Cette couleur sera très probablement solide (complètement opaque) ex: background:rgb(96, 96, 96). Reportez-vous à ce blog pour la prise en charge du navigateur RGBa.


Des problèmes entre navigateurs avec cela?
Jon P

9
quelle est la propriété si nous voulons spécifier séparément background-image et ceci?
Petruza

2
@Petruza il semble que nous n'avons pas d'autre choix que d'utiliser cette syntaxe. Lisez la référence : «Étant donné que les <gradient> appartiennent au type de données <image>, ils ne peuvent être utilisés que là où les <image> peuvent être utilisés. Pour cette raison, linear-gradient () ne fonctionnera pas sur background-color et d'autres propriétés qui utilisent le type de données <couleur> "
Marco Panichi

18

Utilisez un: après l'élément 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;
}

Découvrez mon stylo>

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


Bon mais ne fonctionne pas dans Firefox 47.0.1 sur Windows 10. Mais fonctionne avec IE. Avez-vous un correctif pour Firefox?
John Max

2
@JohnMax Firefox fonctionne très bien maintenant. Il suffit d'attendre quelques années.
Craig O. Curtis

10

Le réglage background-blend-modesur darkenserait le moyen le plus direct et le plus court d'atteindre l'objectif, mais vous devez définir un background-colorpremier pour que le mode de fusion fonctionne.
C'est également le meilleur moyen si vous devez manipuler les valeurs en javascript ultérieurement.

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;

Puis-je utiliser pour le fondu


1
edge ou IE11 n'est pas vraiment un navigateur
stackdave

6

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

cependant, je ne peux pas le faire s'appliquer réellement à une image. Uniquement sur les arrière-plans 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
<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>


2

Vous pouvez utiliser un conteneur pour votre arrière-plan, placé comme z-index absolu et négatif: 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

Juste pour ajouter à 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 multi-navigateurs d'une superposition de gradient linéaire à 70%. Pour éclaircir l'image, vous pouvez changer tous ceux 0,0,0-ci en 255,255,255's. Si 70%, c'est un peu trop, allez-y et changez le .7. Et, pour référence future, consultez ceci: http://www.colorzilla.com/gradient-editor/


1

lorsque vous voulez une luminosité ou une couleur d'arrière-plan plus sombre, vous pouvez utiliser ce code css

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

.darker-span {
  filter: brightness(50%);
}

Merci, je ne connaissais pas les filtres css . Au cas où cela aiderait quelqu'un, voici le statut Puis-je utiliser (mars 2020).
Reed Dunkle

0

Pour moi, l'approche filtre / dégradé n'a pas fonctionné (peut-être à cause du CSS existant), j'ai donc utilisé une :beforepseudo astuce de style à 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;
}

Étant donné que la valeur displaypar défaut ::beforeest, inlineelle n'acceptera pas widthet height.
connexo

Merci @connexo, on dirait que je l'ai manqué lors de la copie des styles pertinents.
Daniel Sokolowski
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.