The easiest way to set transparent background color to a HTML element, without affecting the text-content is to use the rgba() function in CSS.
- The rgba() function is supported by all major browsers (IE 9+).
Example:
<style type="text/css">
#dv1 {
  position: relative;
  width: 78%;
  height: 8em;
  background: rgb(128, 139, 210);     /* For browsers that don't support rgba */
  background-color: rgba(128, 139, 210, 0.5);   /* Transparent background color */
}
</style>

<div id="dv1">
Semi-transparent background color, not affecting text content.<br/>
CSS code snippets from: <a href="http://coursesweb.net/" title="CSS Course">http://coursesweb.net/css/</a>
</div>
Result:
Semi-transparent background color, not affecting text content.
CSS code snippets from: http://coursesweb.net/css/

Transparent Background Image

To create a transparent background image with CSS, the trick is to insert a pseudo element with a image for background and regular opacity, the exact size of the element behind it.
- The pseudo elements are supported by all major browsers (IE 8+).
Example:
<style type="text/css">
#dv2 {
  position: relative;
  width: 78%;
  height: 8em;
  background-color: #fefe90;
  font-size: 1.3em;
}
#dv2::before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 0;
  content: "";
  background: url('image.jpg');
  background-repeat: no-repeat;
  background-position: 30% 50%;
  opacity: 0.5;
}

/* Settingas for mouse over the element */
#dv2:hover::before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 0;
  content: "";
  background: url('image.jpg');
  background-repeat: no-repeat;
  background-position: 30% 50%;
  opacity: 0.7;
}
</style>

<div id="dv1">
Semi-transparent background color.<br/>
CSS code snippets from: <a href="http://coursesweb.net/" title="CSS Course">http://coursesweb.net/css/</a>
</div>
Result:
Semi-transparent background image.
CSS code snippets from: http://coursesweb.net/css/

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag create a highlighted bolded text?
<q> <strong> <em>
<p>Address: <strong>http://CoursesWeb.net/</strong> - Tutorials.</p>
Which of these CSS codes displays the text bolded?
text-size: 18px; font-style: italic; font-weight: 800;
#id {
  font-weight: 800;
}
What JavaScript function can be used to call another function multiple times, to a specified time interval?
setInterval() setTimeout() push()
function someFunction() { alert("CoursesWeb.net"); }
setInterval("someFunction()", 2000);
Click on the correctly defined variable in PHP.
var vname = 8; $vname = 8; $vname == 8;
$vname = 8;
echo $vname;
Transparent Background, but not the text-content on it

Last accessed pages

  1. PuzzleImg - Script to Create Image Puzzle Game (1478)
  2. Bubble Tanks Tower Defence (190)
  3. Strategy Games (7099)
  4. CKEditor Free Image Uploader Addon (4984)
  5. Dynamic variables in JavaScript (3981)

Popular pages this month

  1. Qwop (4774)
  2. Bubbles3 (3841)
  3. Butterfly Kyodai (3165)
  4. Drag Racer V3 (3122)
  5. Zuma Deluxe (2270)