I’ve been using semi-transparent effects on many websites that I’ve been creating for users.
For example, there is usually a main content area that has a white background. However, the customer has specifically requested that they want to have a background image on their website that can also be seen through the white area of the content.
This is also called website opacity, graphic opacity, graphic transparency, or website transparency – amongst many other ways that it is called.
In order to get the transparent objects to work on a website, there are only a few stylesheet / CSS modifications that are needed:
filter:alpha(opacity=90);
So for example, take this image – which is used on my website as a graphic:
So in the above, I created a DIV and manually set the parameters so it would be 191 pixels wide by 61 pixels tall with a background image applied. There isn’t any opacity applied to the above.
Now, below, we will set an opacity value of 0.5 – which means it will be 50% transparent and 50% opaque:
Pretty neat eh? This can be done with any section of a website. In essence, the opacity filter on a website will take a graphic – or even a standard color (will show that momentarily) – and make it so it has a level of transparency to it.
Here is an example of a purely black hex color (#000000) and it looks like a shade of gray. That is because the background of this site is white – so when you put together a black color that is semi-opaque with the white background, it combines to make a gray color. The opacity value in this example is set to 75% (0.75) – so it is 75% opaque and 25% transparent:
Alright, let’s do one more example that may be more of a hands-on task. In general when I do website design, I will create a “body” section in a CSS file. Let’s set the CSS to this:
margin: 0px 0px 0px 0px;
background-image: url(‘http://www.bsntech.com/wp-content/uploads/2015/03/bsn_logo.png’) repeat-x;
}
This will set the overall background for the website (in this case – the background of this website you are viewing now with the blue).
Then, another piece of CSS code will actually make the content area of the website itself – which in the case of this page, the white area you are viewing now:
margin: 0px auto;
width: 700px;
opacity:0.5;
filter:alpha(opacity=50);
background: #ffffff;
}
In the “content” section of the CSS file, it says that the content area will be 700 pixels wide and it will be centered on the page (hence the margin 0px auto – as described in a previous post). It also says the background will be all white – BUT it will have an opacity of 50%. This will allow some of the background-image indicated in the “body” section above to bleed through over the top. While the below example doesn’t show the full-size 700 pixel width, this will give you a general idea:
So in the above example, that shows you hands-on uses for using transparent or opaque objects in websites. The above gives you the full example of having a background image applied – and then having a certain opacity set to the content area of the site where the text might be. The various shades of opacity used above include 50%, 75%, and then 25% – so you can see the difference.
As discussed, you can use the opacity or transparent filter on any object on the website. If you want to make a background image be a little lighter than the original graphic, apply the transparent effect. If you want a content area to have a background image overlay like in the above, it can be done. If you simply want to change a shade of a color (like the black color above), you can use opacity to change the hue.
There certainly are many uses for allowing you to make use of these transparent stylesheet properties – and add an extra design dimension to your site!