image3

welcome to my blog|hope be useful

Cara Menambahkan Effect Overlay atau Menumpuk Gambar Transparant pada Background Objek

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 :)

TAGS : Blogger CSS HTML

Share :

Blog ini tidak menyediakan URL / Link Download segala jenis Konten yang Bersifat Ilegal, seperti Crack, Patch, Serial Number, dan Sejenisnya.

PROFIT KONSISTEN DENGAN ROBOT TERBAIK :

FREE Trial Forex EA Trader
Forex Trend Detector
Dynamic Pro Scalper
Forex Diamond EA - Robot Forex Terbaik
WallStreet Forex Robot 2.0 Evolution
Volatility Factor 2.0

CONVERSATION