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

avatar momoji
@momoji

108 Kontribusi 44 Poin

Diperbarui 7 tahun yang lalu

4 Jawaban:

coba lampirin scriptnya, siapa tau kita bisa bantu.. :)

avatar gunalirezqimauludi
@gunalirezqimauludi

350 Kontribusi 243 Poin

Dipost 7 tahun yang lalu

oke ini gan,

bright moonlight

tengah

avatar momoji
@momoji

108 Kontribusi 44 Poin

Dipost 7 tahun yang lalu

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>

avatar gunalirezqimauludi
@gunalirezqimauludi

350 Kontribusi 243 Poin

Dipost 7 tahun yang lalu

oke gan, bisa thanks banget :D

avatar momoji
@momoji

108 Kontribusi 44 Poin

Dipost 7 tahun yang lalu

Login untuk ikut Jawaban