Semi-transparent background image and non transparent text [Archive]

Fli

11-03-2014, 11:23 PM

Hi,

what are simple and effective ways to achieve semi-transparent background image and non-transparent text?
Example page with transparent backround image: http://cpanelhosting.cz.cc/ (it has low brightness image, no transparency set)

So far i have found this way to allow making transparent image out of normal image using CSS:

a HTML file:
PHP Code:
<html>
<head><title>Page title</title>
<style type="text/css">
div.bg {
-khtml-opacity:.50;
-moz-opacity:.50;
-ms-filter:"alpha(opacity=50)";
filter:alpha(opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0. 5);
opacity:.50;
background-image: url('cms_wordpres_drupal_joomla-free.jpg');
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top right;
background-color:rgba(255,0,0,0.05); // very soft pink background
}

div.text {
font-family:Tahoma;
}
</style>
</head>
<body>
<div class="bg"><div>
<div class="text">
Text here
</div>
</body>
</html>

So in body i have two DIV blocks.
- First i have one with class "bg" (background) for this one i set in CSS transparency and bg image.
- Second DIV has class "text" and for it i only set font familly

---------
Another way is to edit image in IrfanView or other editor and Adjust colors (Color corrections) to decrease Brightness.