YogeshChauhan.com
How to set opacity or transparency using CSS?
June 28, 2019

The example below will show you how to set a transparency or opacity of an image and then I’ll also show you how to do the same for any element as well

Let’s download one high definition image first. Use the following link from Pixbay to download image. Although, you can choose your own image. This is just for the example purpose only.

Click to download image

Awesome. Now I assume you have a basic knowledge of how HTML works. So, I’ll skip the HTML talks and discuss about the code below.

<body data-rsssl=1><p><img class=lazy alt=nature-image-CSS-opacity-example src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src=images/CSS/opacity-transparency-CSS.jpg></p><script>window.w3tc_lazyload=1,window.lazyLoadOptions={elements_selector:".lazy",callback_loaded:function(t){var e;try{e=new CustomEvent("w3tc_lazyload_loaded",{detail:{e:t}})}catch(a){(e=document.createEvent("CustomEvent")).initCustomEvent("w3tc_lazyload_loaded",!1,!1,{e:t})}window.dispatchEvent(e)}}</script><script async src=https://www.yogeshchauhan.com/wp-content/cache/minify/1615d.js?x75580></script> </body>

All we need to do is just add an image in the HTML body. I’ve an image in the folder so the href is a bit longer. You can have the image in any folder and with any name. Always try to add the alt attribute of an image so that in case if browser can’t open the image then it’ll at lease show the alter texts and user might get an idea about the image.

The opacity property sets the transparency of any image or div, basically any element. To make it more transparent you can decrease the value.

Let’s set 50% opacity for the following image first

Add the style as in the code below.


img{
   opacity: 0.5;
}

I know. It’s easy.

The opacity property takes values from 0.0 to 1.0. If it’s 0.0 then you won’t be able to see and if it’s 1.0 then you’ll see the image as it is. So, lower the value if you want to make any element more transparent.

So as you can see now that we’ve set the image as full background. Checkout the DEMO from the link given at the end of this article.

What about elements like div?

It’s same type of code for any elements. Let’s write down some code and then discuss the example.

Let’s add some div elements in our page first.

<div class=two><p>opacity 0.2</p></div><div class=four><p>opacity 0.4</p></div><div class=six><p>opacity 0.6</p></div>

Now let’s just add some style to that HTML code.

 
div{
   background-color: blue;
   padding: 20px;
}

div.two {
   opacity: 0.2;
}

div.four {
   opacity: 0.4;
}

div.six {
   opacity: 0.6;
}

As you can see we can set the opacity for any elements.

dreamhost

Leave a Reply

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to set opacity or transparency using CSS? #3 Pagination in CSS with multiple examples #4 How to make HTML form interactive and using CSS? #5 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

Mar 2 How to zoom an element on hover using CSS? Mar 2 the box-sizing property in CSS Mar 2 WordPress: How to access first and random row values from a repeater field in ACF? Mar 1 The basics of CSS Box model Feb 27 WordPress: How to display slider repeater fields in ACF? Feb 26 Simple Page Hit Counter in PHP

You might also like these

Content types in DrupalDrupalHow to create a Progress Bar using JavaScript?JavaScriptHow to change CSS with jQuery?CSSRecursive WITH Queries in Postgres (Common Table Expressions)PostgresHow services and dependency injection work in Angular?AngularThe 7 Security Objectives of Any Organization for IT and Network SecurityMisc