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

j'ai un élément de texte. Chaque fois que je diminue l'opacité, alors je diminue l'opacité du corps entier. Y a-t-il un moyen de rendre le background-image plus 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');
72
demandé sur TylerH 2014-04-22 04:18:26

6 réponses

il suffit d'ajouter 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 devez donc avoir une "couleur de repli". Cette couleur sera très probablement solide (entièrement opaque) ex: background:rgb(96, 96, 96) . Se référer à ce blog pour le support du navigateur RGBa.

137
répondu nej 2015-12-05 20:45:18

utiliser un: après psuedo-élément:

.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 ma plume >

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

16
répondu Craig O. Curtis 2016-04-03 19:39:05

vous pouvez utiliser un conteneur pour votre arrière-plan, placé en 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
répondu Yooz 2014-04-22 00:29:30

juste pour ajouter à ce qui est déjà ici, 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 par le navigateur d'une superposition à gradient linéaire de 70%. Pour égayer l'image, vous pouvez changer tous les 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, vérifiez ceci: http://www.colorzilla.com/gradient-editor /

2
répondu Alex Price 2016-03-09 05:53:58

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

cependant, je n'arrive pas à réellement s'appliquer à une image. Seulement sur les fonds de couleur

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
répondu 2016-12-21 20:02:54

pour moi, l'approche du filtre/gradient n'a pas fonctionné (peut-être à cause du CSS existant) donc j'ai utilisé :before pseudo style truc à 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;
}
0
répondu Daniel Sokolowski 2016-12-21 22:25:25