Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
background-filter blur dengan css
hai all, saya bingung nih caranya buat background menjadi blur, contohnya kaya gaya gambar dibawah ini sudah beberapa kali coba tapi malah ngeblur semuanya, mohon bantuannya
0
4 Jawaban:
coba lampirin scriptnya, siapa tau kita bisa bantu.. :)
0
Jawaban Terpilih
coba.. menggunakan ::before agar tidak blur ke content yang ada di dalem div #tengah, contoh :
<!DOCTYPE html>
<html>
<head>
<title>bright moonlight</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body id="body">
<style type="text/css">
body,
#tengah::before {
background: url("wallpaper.jpg") fixed center no-repeat;
background-size: cover;
-webkit-background-size: cover;
}
#tengah {
margin: 100px auto;
position: relative;
padding: 10px 5px;
border: 1px solid #fff;
background: hsla(0, 0%, 100%, .3);
font-size: 20px;
line-height: 1.5;
width: 60%;
overflow: hidden;
}
#tengah::before {
content: '';
margin: -35px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
filter: blur(20px);
z-index: -1;
}
</style>
<div id="tengah">
<p>tengah<p>
</div>
</body>
</html>
1