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. Amuse Park (348)
  2. $_GET, $_POST and $_REQUEST Variables (24096)
  3. Qwop (52708)
  4. Japanese Mahjong (686)
  5. My New Room 2 (162)

Popular pages this month

  1. Qwop (7626)
  2. Drag Racer V3 (4432)
  3. Bubbles3 (1775)
  4. Flash Games - Free online Games (1614)
  5. Butterfly Kyodai (1286)