Graustufen beeinflussen alles im Container

Wenn ich eine Graustufe zu meinem Container hinzufüge, macht es alles grau. Ich versuche nur meinen Hintergrund als Graustufen und meine Spannweite oder wirklich alles darin zu sehen, um nicht betroffen zu sein.Graustufen beeinflussen alles im Container

Das Ziel ist, mein Hintergrundbild nur Graustufen zu machen. Und meinen Content nicht beeinflussen zu lassen.

Weiß jemand, wie man das erreicht?

HTML

<div class="greyscale"> 
    <span>a</span> 
</div>

CSS

div { 
    width:20%; 
    height:20%; 
    background-image: url('/image/theimage.png'); 
    color:red; 
} 

.greyscale { 
    -webkit-filter: grayscale(100%); 
    filter: greyscale(100%); 
} 

span { 
    -webkit-filter: grayscale(0); 
    filter: greyscale(0); 
}

Quelle

2016-08-29 bryan

Verwenden Graustufenfilter in dem Pseudo-Element von div und Position relativ zu den Eltern. –

'Graustufen()' check u css beim Start –

Mögliche Duplikate von [Wie man einen CSS 3 Unschärfe-Filter auf ein Hintergrundbild anwendet] (http://stackoverflow.com/questions/20039765/how-to-apply-a- css-3-Unschärfe-Filter-zu-einem-Hintergrund-Bild) – gcampbell

Hier gehen Sie den Trick mit nach

zu tun ist,

div { 
 
    width:500px; 
 
    height:500px; 
 
    color:red; 
 
    position: relative; 
 
} 
 
div:after { 
 
    content:""; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left:0; 
 
    right:0; 
 
    background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/IMG_M7test1816.JPG/1280px-IMG_M7test1816.JPG'); 
 
    -webkit-filter: grayscale(100%); 
 
    filter: grayscale(100%); /* fix type error */ 
 
    z-index: -1; 
 
    } 
 

 
span { 
 
    z-index: 3; 
 
}

<div> 
 
    <span>Test</span> 
 
</div>

Quelle

2016-08-29 17:52:54

Sie könnten einen Container hinzufügen und ein Bild wie folgt hinzu:

.container { 
 
    display: block; 
 
    width: 300px; 
 
    height: 300px; 
 
    color: yellow; 
 
    z-index: 100; 
 
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; 
 
} 
 
.text { 
 
    padding: 10px; 
 
} 
 
.cat { 
 
    position: absolute; 
 
    top:0px; 
 
    -webkit-filter: grayscale(100%); 
 
    filter: greyscale(100%); 
 
    z-index: -1; 
 
    background-position: center; 
 
}

<div class="container"> 
 
    <img class="cat" src="http://placekitten.com/300/300" /> 
 
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
 
</div>

Quelle

2016-08-29 17:57:37 reinierkors

Graustufen beeinflussen alles im Container

Antwort

Verwandte Themen