Transparent Background, but not the text-content on it

Css Course

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="https://coursesweb.net/" title="CSS Course">https://coursesweb.net/css/</a>
</div>

Result:

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="https://coursesweb.net/" title="CSS Course">https://coursesweb.net/css/</a>
</div>

Result:

<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>

#id {
  overflow: auto;
}

document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
}

if(isset($_GET["id"])) {
  echo $_GET["id"];
}