How to make transparent background html

Transparent background – one of the elements of graphic design, allowing to implement the tasks of website design. It is often used on resources of different directions, so each specialist in the field of web development it is useful to know the principles of its construction.

How to make transparent background html
How to make a red string of html
How to make a transparent background logo
How to make a white background transparent

Instruction

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>

Is the advice useful?