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:
Semi-transparent background color, not affecting text content.
CSS code snippets from: https://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="https://coursesweb.net/" title="CSS Course">https://coursesweb.net/css/</a>
</div>
Result:
Semi-transparent background image.
CSS code snippets from: https://coursesweb.net/css/

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which meta tag provides a short description of the page?
<meta content="..."> <meta description="..."> <meta http-equiv="...">
<meta name="description" content="70-160 characters that describes the content of the page" />
Which CSS property is used to stop the wrapping effect of the "float"?
clear text-align position
#some_id {
  clear: both;
}
Click on the method which gets an array with all the elements in the document that have a specified tag name.
getElementsByName() getElementById() getElementsByTagName()
var divs = document.getElementsByTagName("div");
var nr_divs = divs.length;
alert(nr_divs);
Indicate the PHP function which returns the number of elements in array.
is_[) count() strlen()
$arr =[7, 8, "abc", 10);
$nri = count($arr);
echo $nri;        // 4
Transparent Background, but not the text-content on it

Last accessed pages

  1. HTML Course - Free Lessons (11042)
  2. Register and show online users and visitors (22722)
  3. Pagination Class - Script to paginate content (1618)
  4. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (41518)
  5. The Stage, Panels and Tools in Flash (6329)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (341)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (281)
  3. Register and show online users and visitors (264)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (258)
  5. Insert, Select and Update NULL value in MySQL (162)