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 tag is used to add lists into <ul> and <ol> elements?
<dt> <dd> <li><ul>
<li>http://coursesweb.net/html/</li>
<li>http://coursesweb.net/css/</li>
</ul>
Which value of the "display" property creates a block box for the content and ads a bullet marker?
block list-item inline-block.some_class {
display: list-item;
}Which instruction converts a JavaScript object into a JSON string.
JSON.parse() JSON.stringify eval()var obj = {
"courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr); // {"courses":["php","javascript","ajax"]}Indicate the PHP class used to work with HTML and XML content in PHP.
stdClass PDO DOMDocument$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue; // CoursesWeb.net