Wie man dieses Bild mit transparentem dunklem Hintergrund verwischen

Ich möchte das Bild wie unten Bild mit CSS implementieren. Ich meine, ich möchte den Bildhintergrund erscheinen lassen, aber davor sollte das Bild transparent sein. Ich meine, es sollte wie Unschärfe bedeckt sein. Ich möchte wie unter Bild erreichen.Wie man dieses Bild mit transparentem dunklem Hintergrund verwischen

img { 
 
    -webkit-filter: blur(5px); 
 
-moz-filter: blur(5px); 
 
-o-filter: blur(5px); 
 
-ms-filter: blur(5px); 
 
filter: blur(5px); 
 
position:fixed; 
 
}

<div><img src="http://i.imgur.com/v06GqMK.jpg" /></div>

Quelle

2016-08-04 overflowstack9

ok warten .... ........ – overflowstack9

also was willst du noch? der dunkle Hintergrund? –

@ Kode.Error404 ich fügte hinzu, aber das Bild, das ich erreichen möchte, wie oben Bild mein Bild dreht sich zu mehr Unschärfe – overflowstack9

Sie CSS Pseudo-Element oder ein anderes HTML-Element verwenden können, um dies zu erreichen. Hier ist ein Beispiel des Pseudo-Element mit: vor

.blur { 
 
    position: relative; 
 
    display: inline-block; /* make the div not 100% */ 
 
} 
 
/* the 'blur' effect */ 
 
.blur:before { 
 
    content: ''; 
 
    background-color: #000; 
 
    opacity: 0.5; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 1; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.blur img { 
 
    display: block; /* remove bottom space */ 
 
}

<div class="blur"> 
 
    <img src="http://i.imgur.com/v06GqMK.jpg" /> 
 
</div>

Quelle

2016-08-04 03:41:33 slashsharp

es löste mein Problem – overflowstack9

User this 

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div.background { 
    background: url(klematis.jpg) repeat; 

    border: 2px solid black; 
    -webkit-filter: blur(2px); 
-moz-filter: blur(2px); 
-o-filter: blur(2px); 
-ms-filter: blur(2px); 
filter: blur(2px); 
} 

div.transbox { 
    margin: 0px; 
    background: #fff; 
    border: 1px solid black; 
    opacity: 0.5; 

} 

div.transbox p { 
    margin: 5%; 
    font-weight: bold; 
    color: #000000; 
} 
</style> 
</head> 
<body> 

<div class="background"> 
    <div class="transbox"> 
    <p>This is some text that is placed in the transparent box.</p> 
    </div> 
</div> 

</body> 
</html>

Quelle

2016-08-04 03:46:30

das ist, was Sie wollen:

.container { 
 
    background: url("https://d36ai2hkxl16us.cloudfront.net/thoughtindustries/image/upload/a_exif,c_fill,w_750,h_361/v1426633725/eq54w9myfn6xfd28p92g.jpg") no-repeat; 
 
    background-position: center; 
 
    background-size: cover; 
 
    background-attachment: fixed; 
 
    width: 750px; 
 
    height: 361px; 
 
    position: relative; 
 
    text-align: center; 
 
} 
 

 
.container::before { 
 
    content: ""; 
 
    display: block; 
 
    -webkit-filter: blur(1px) brightness(0.5); 
 
    -moz-filter: blur(1px) brightness(0.5); 
 
    -ms-filter: blur(1px) brightness(0.5); 
 
    -o-filter: blur(1px) brightness(0.5); 
 
    filter: blur(1px) brightness(0.5); 
 
    position: absolute; 
 
    left: 10px; 
 
    top: 10px; 
 
    right: 10px; 
 
    bottom: 10px; 
 
    background: inherit; 
 
    z-index: 0; 
 
} 
 

 
.content { 
 
    position: relative; 
 
    z-index: 10; 
 
    padding-top: 50px; 
 
} 
 

 
.title { 
 
    font-family: arial; 
 
    font-size: 3em; 
 
    color: gold; 
 
    font-weight: 900; 
 
    margin: 20px; 
 
} 
 

 
.text { 
 
    font-family: arial; 
 
    font-size: 2em; 
 
    color: white; 
 
    font-weight: 100; 
 
    padding: 20px; 
 
    border: 1px solid gray; 
 
    display: inline-block; 
 
    width: 40%; 
 
}

<div class='container'> 
 
    <div class='content'> 
 
    <div class='title'>Content Marketing</div> 
 
    <div class='text'>6 Essential Elements You Can't Ignore</div> 
 
    </div> 
 
</div>

Quelle

2016-08-04 03:59:51

ja so .... :) es hat funktioniert – overflowstack9

Wie man dieses Bild mit transparentem dunklem Hintergrund verwischen

Antwort

Verwandte Themen