Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
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