My girlfriend and I have been trying to play with this <div> background code and opacity for this huge block of text she has on this real basic website.

All we are trying to accomplish is to place a grey background behind the text and make it semi-opaque and not the text along with it. We have accomplished at making both opaque but not just one or the other :/

We tried nesting them within one another but it didn't work

help plx

6 Years
Discussion Span
Last Post by mahavir123

I'd suggest using rgba to define your background. This will give a background which is transparent while keeping your text solid. This post on 24ways should be able to instruct you on how to do this.


Above code is very good I have tried it it is working fine
My code is

<style type="text/css">
div.divOpaque {
	color: rgb(0, 0, 0);
	background-color: rgba(23,23,23, 0.2);
	<div class="divOpaque">By Mahavir Senapati</div>
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.