Cara Membuat Teks Dengan Background Transparan

Berikut ini cara membuat teks dengan background transparan dengan mudah. Bisa Anda praktekan di blog Anda biar terlihat lebih menarik. 

Background Transparat

Heading

Contoh Teks Dengan Background Transparan Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei.

<div class=”container”>

<img src=”https://www.mega-citybekasi.com/wp-content/uploads/2018/06/Background.jpg” alt=”Background Transparat” style=”width:100%;”>

     <div class=”content”>

    <h2>Heading</h2>

    <p>Contoh Teks Dengan Background Transparan Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei.</p>

  </div>

</div>

.container {
    position: relative; 
    max-width: 800px; /* Maximum width */
    margin: 0 auto; /* Center it */
}

.container .content {
    position: absolute; /* Position the background text */
    bottom: 0; /* At the bottom. Use top:0 to append it to the top */
    background: rgba(0, 0, 0, 0.8); /* Black background with 0.5 opacity */
    color: #f1f1f1; /* Grey text */
    width: 100%; /* Full width */
    padding: 20px; /* Some padding */
}

HTMLLetakkan kode di artikel yang akan Anda publish

CSS

Penempatan kode di template diantara tag : <skin> Letakkan Kode Disini </skin> atau langsung dimasukkan di artikel dimana kodenya diapit dengan : <style> Kode CSS </style>

ImagePilih dan replace dengan alamat url Image Anda

Leave a Comment

Your email address will not be published. Required fields are marked *