informasi investasi, informasi saham, informasi forex, informasi kripto, informasi saham hari ini, informasi forex hari ini, informasi kripto hari ini, fundamental saham, fundamental forex, fundamental kripto, berita investasi, berita saham, berita forex, berita kripto, berita saham hari ini, berita forex hari ini, berita kripto hari ini, artikel investasi, artikel saham, artikel forex, artikel kripto, prediksi saham, prediksi forex, prediksi kripto, analisa saham, analisa forex, analisa kripto, trading saham, trading forex, trading kripto, belajar trading saham, belajar trading forex, belajar trading kripto, panduan trading saham, panduan trading forex, panduan trading kripto, tips trading saham, tips trading forex, tips trading kripto.
image3

Cara Menambahkan Effect Overlay atau Menumpuk Gambar Transparant pada Background Objek

Published at September 2018
Content Category : Blogger
Tokocrypto Powered by Binance

Berikut adalah Cara untuk Menambahkan Effect Overlay pada Background sebuah Elemen atau Objek, lebih jelasnya adalah menumpuk Background dengan sebuah gambar transparant. ini akan bermanfaat ketika anda kesulitan mengatur warna tulisan pada Background, sehingga cara ini bisa memperjelas tulisan atau kebutuhan lainnya  :


  • Contoh Standar CSS pemberian Background pada sebuah Objek :

.overlay-effect-test {
    width: 100%;
    height: auto;
    background-color: #00bff9;
    background-image: url(https://2.bp.blogspot.com/-ghvqhJS3r3I/W5Cn_l6YjxI/AAAAAAAAGt8/sTqqkBHJZTInr3K6sTXQ5L8L_a71E6cCwCLcBGAs/s1600/1.jpg);background-size:cover;
    border: 2px solid #7d7d7d;
    border-radius: 5px;
}

.overlay-effect-test a {
    text-align:center;
    font-size: 20px;
    text-decoration:none;
    color: #fff;
    text-shadow: 0px 0px 3px #fff;
    text-align: center;
    margin: auto;
    padding: 100px;
    display:block;
}

  • Maka hasilnya seperti ini :


  • Untuk menumpuk Background dengan Gambar Transparant agar tulisan menjadi lebih jelas, gunakan CSS seperti ini :

.overlay-effect-test {
    width: 100%;
    height: auto;
    background-color: #00bff9;
    background-image: url (https://4.bp.blogspot.com/-Mo_VFikp3g4/W5Cn_hzJ7lI/AAAAAAAAGt4/N07jJqSY40smyIhMubWvOAKGVPVF0GstACEwYBhgL/s1600/overlay.png), url(https://2.bp.blogspot.com/-ghvqhJS3r3I/W5Cn_l6YjxI/AAAAAAAAGt8/sTqqkBHJZTInr3K6sTXQ5L8L_a71E6cCwCLcBGAs/s1600/1.jpg);background-size:cover;
    border: 2px solid #7d7d7d;
    border-radius: 5px;
}

.overlay-effect-test a {
    text-align:center;
    font-size: 20px;
    text-decoration:none;
    color: #fff;
    text-shadow: 0px 0px 3px #fff;
    text-align: center;
    margin: auto;
    padding: 100px;
    display:block;
}



  • Maka hasilnya akan seperti ini :



Semoga Bermanfaat, Happy Blogging :)

Bagikan :

CONVERSATION