Come scurire uno sfondo usando i CSS?


100

Ho un elemento con del testo al suo interno. Ogni volta che diminuisco l'opacità, diminuisco l'opacità di TUTTO il corpo. C'è un modo in cui posso semplicemente rendere l' background-imageoscurità e non tutto il resto?

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

Risposte:


197

Basta aggiungere questo codice al css dell'immagine

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

Riferimento: linear-gradient () - CSS | MDN

AGGIORNAMENTO: non tutti i browser supportano RGBa, quindi dovresti avere un "colore di riserva". Questo colore sarà molto probabilmente solido (completamente opaco) ex: background:rgb(96, 96, 96). Fare riferimento a questo blog per il supporto del browser RGBa.


Eventuali problemi con il browser incrociato con questo?
Jon P

9
qual è la proprietà se vogliamo specificare separatamente l'immagine di sfondo e questa?
Petruza

2
@ Petruza sembra che non abbiamo altra scelta che usare questa sintassi. Leggi il riferimento : "Poiché i <gradient> appartengono al tipo di dati <image>, possono essere utilizzati solo dove possono essere utilizzati i <image>. Per questo motivo, linear-gradient () non funziona con background-color e altre proprietà che utilizzano il tipo di dati <colore> "
Marco Panichi

18

Usa un: dopo l'elemento 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;
}

Guarda la mia penna>

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


Buono ma non funziona in Firefox 47.0.1 su Windows 10. Ma funziona con IE. Hai qualche soluzione per Firefox?
John Max

2
@JohnMax Firefox ora funziona correttamente. Devo solo aspettare qualche anno.
Craig O. Curtis

10

L'impostazione background-blend-modesu darkensarebbe il modo più diretto e più breve per raggiungere lo scopo, tuttavia è necessario impostare un background-colorprimo per far funzionare la modalità di fusione.
Questo è anche il modo migliore se hai bisogno di manipolare i valori in javascript in seguito.

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;

Posso usare per la fusione dello sfondo


1
edge o IE11 non è davvero un browser
stackdave

6

Potrebbe essere possibile farlo con box-shadow

tuttavia, non riesco a farlo applicare effettivamente a un'immagine. Solo su sfondi in tinta unita

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

Puoi utilizzare un contenitore per il tuo sfondo, posizionato come z-index assoluto e negativo: 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

Solo per aggiungere a ciò che è già qui, usa quanto segue:

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

... per il supporto cross-browser di una sovrapposizione con gradiente lineare al 70%. Per schiarire l'immagine, puoi cambiare tutti quelli 0,0,0in 255,255,255. Se il 70% è un po 'troppo, vai avanti e cambia il .7. E, per riferimento futuro, controlla questo: http://www.colorzilla.com/gradient-editor/


1

quando vuoi la luminosità o più scuro del colore di sfondo, puoi usare questo codice css

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

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

Grazie, non sapevo dei filtri CSS . Nel caso in cui aiuti qualcuno, ecco lo stato Posso usare (marzo 2020).
Reed Dunkle

0

Per me l'approccio filtro / gradiente non ha funzionato (forse a causa del CSS esistente), quindi ho usato :beforeinvece uno pseudo trucco di stile:

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

Dal momento che il valore predefinito displayper ::beforeè inlinenon accetterà widthe height.
collegamento

Grazie @connexo, sembra che mi sia perso durante la copia degli stili pertinenti.
Daniel Sokolowski
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.