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 is used in <table> to create table header cell?
<thead> <th> <td>
<table><tr>
  <th>Title 1</th>
  <th>Title 2</th>
</tr></table>
Which CSS property sets the distance between lines?
line-height word-spacing margin
.some_class {
  line-height: 150%;
}
Which function opens a new browser window.
alert() confirm() open()
document.getElementById("id_button").onclick = function(){
  window.open("http://coursesweb.net/");
}
Indicate the PHP function that returns an array with names of the files and folders inside a directory.
mkdir() scandir() readdir()
$ar_dir = scandir("dir_name");
var_export($ar_dir);
Transparent Background, but not the text-content on it

Last accessed pages

  1. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (53270)
  2. Qwop (22515)
  3. Mahjong Gardens (4846)
  4. Bubble Hit (1523)
  5. Dog Mahjong (4116)

Popular pages this month

  1. Bubbles3 (3702)
  2. Butterfly Kyodai (2804)
  3. Zuma Deluxe (2375)
  4. Backgammon (1425)
  5. Qwop (1374)