Cara Mengganti Background Postingan Menjadi Transparan

Salah satu variasi untuk mempercantik tampilan artikel sebuah blog adalahmembuat latar posting menjadi transparan, namun untuk melakukannya dibutuhkan kemampuan untuk mengkombinasikan warna latar dan warna text, dengan latar belakang artikel tersebut untuk membuat kesan transparan tersebut tampil pas tanpa terlalu mengganggu readability dari artikel yang kita tulis.

Saya bukanlah seorang yang ahli dalam desain template blog, seperti yang telah saya tuliskan dalam posting Inilah Make Up Template Terakhir The Art of SEO, seringkali saya mengalami kesulitan dalam melakukan mix and match warna, gambar dan desain, hingga seperti posting kali inilah hasil terbaik yang bisa saya lakukan.

Membuat background posting menjadi transparan

Yang saya lakukan untuk membuat latar posting ini transparan adalah mengganti latar post dari nilai hexadesimal ke rgba. Pertama-tama saya mengganti latar .main-inner menggunakan gambar yang saya buat menggunakan aplikasi photoscape dan saya upload ke album web picassaseperti berikut :

.main-inner { background:#7b7c47 url(https://lh3.googleusercontent.com/-uliLMHIsokQ/UQ6Lw7jdBoI/AAAAAAAABks/XLCqj-FnNys/s124/pattern.jpg) repeat;}

property repeat di atas untuk mengakali ukuran gambar yang kecil ditampilkan berjajar hingga memenuhi 100% bagian main inner. Sedangkan tujuan penggunaan gambar tersebut untuk lebih menonjolkan efek transparan dari latar posting nantinya, dan penggunaan kode warna#7b7c47 untuk mengantisipasi gagalnya loading gambar atau hilangnya gambar jika terhapus dikemudian hari.

Berlanjut ke bagian posting, karena saya sebelumnya memberikan latar gambar dengan dominasi warna hijau tua, maka kali ini saya membuat latar posting berwarna putih yang memiliki nilai RGB 255,255,255 dan saya tambahkan nilai akhir 0.79 yang akan membuat warna putih tersebut menjadi transparan. Untuk anda yang ingin ikut mencoba, sedikit petunjuk bahwa semakin kecil nilai akhir yang kita tambahkan tersebut maka tampilan warna akan semakin transparent.

Kemudian untuk sedikit mempermanis, saya tambahkan juga border dengan warna biru muda, sebagai tambahan materi, silahkan baca jugajenis-jenis border pada CSS.
Lengkapnya, berikut style yang saya tambahkan :

.post { background : rgba(255,255,255,0.79);border:9px solid rgba(52,170,252,0.13)}

Sehingga jika digabung dengan kode di awal tadi menjadi :

.main-inner { background:#7b7c47 url(https://lh3.googleusercontent.com/-uliLMHIsokQ/UQ6Lw7jdBoI/AAAAAAAABks/XLCqj-FnNys/s124/pattern.jpg) repeat;} 
.post { background : rgba(255,255,255,0.79);border:9px solid rgba(52,170,252,0.13)} 

dan saya tambahkan tag style hingga lengkapnya :

<style type="text/css">
.main-inner { background:#7b7c47 url(https://lh3.googleusercontent.com/-uliLMHIsokQ/UQ6Lw7jdBoI/AAAAAAAABks/XLCqj-FnNys/s124/pattern.jpg) repeat;margin-left:10px;} 
.post { background : rgba(255,255,255,0.79);border:9px solid rgba(52,170,252,0.13)}
</style>

lalu saya simpan di akhir postingan ini dalam mode HTML, dan selesailah usaha saya untuk mengganti background posting dengan warna transparan.
Bagaimana menurut anda? apa yang harus saya perbaiki? dan ataukah anda mempunyai cara yang lebih mudah? silahkan berbagi atau share artikel ini melalui tombol share social media di bawah posting ini.
Terima kasih.

Sumber : http://theseoart.blogspot.com/2013/02/mengganti-background-posting-blog.html