The difference between transparent and translucent backgroundω is the parameter indicating the degree of transparency.
One way to make the background translucent is to use the opacity attribute. However, its properties apply to all elements that fall into the field of action. Therefore, with the backgroundω be a transparent image, and pales of the inscription. In principle, the opacity can be successfully used to create the overlay effect. It is used in the following set of tags:<html> <head> <title>Title</title> <style> body { background: url(Kartinkin); } div { opacity: 0.6; background: #color; padding: 10px; } </style> </head><body> <div>Text</div></body></html>• Opacity – the transparency value.• Background: url(Kartinkin) – image to be the backgroundof om.• Background: #color – color of the background.• Padding: 10px thickness field of the element.
Another option, as you can specify the transparency.<html> <head> <title>tab Title</title> <style type="text/css"> BODY { background: url(bg.gif); } .semiopacity { position: relative; width: 100%; height: 200px; } .semiopacity .transparent { background: #color - background; opacity: 0.5; filter: alpha(Opacity=50); height: 100%; } .semiopacity .text { padding: 5px; position: absolute; left: 0; top: 0; } </style></head><body> <div class="semiopacity"> <div class="transparent"></div> <div class="text"> Text </div></div></body></html>• Background: url(bg.gif) – backgroundof the marketing picture.• Position: relative relative positioning.• Opacity: 0.5 is the transparency value.• Filter: alpha(Opacity=50) opacity in IE.• Position: absolute – absolute positioning. • Left: 0; top: 0 – the position of a layer.
To solve this problem, one can use features of the program Adobe Photoshop. To do this, draw a background with the required level of transparency and save it in png format, and then paste it into the code background: url(opacity.png).<html><head> <title>tab Title</title> <style type="text/css"> BODY { background: url(bg.gif); } semiopacity { padding: 5px; background:url(opacity.png); } </style> </head> <body> <div class="semiopacity"> Text on a transparent/translucent backgrounde </div></body></html>