{"id":545,"date":"2022-05-25T10:59:33","date_gmt":"2022-05-25T10:59:33","guid":{"rendered":"https:\/\/gyanipandit.com\/programming\/?p=545"},"modified":"2023-03-28T13:04:47","modified_gmt":"2023-03-28T13:04:47","slug":"css-opacity","status":"publish","type":"post","link":"https:\/\/gyanipandit.com\/programming\/css-opacity\/","title":{"rendered":"CSS Opacity"},"content":{"rendered":"\n<p class=\"has-text-align-center\"><strong>CSS Opacity<\/strong><\/p>\n\n\n\n<p>This property tells how clear are you going to see some elements. This property specifies the transparency or opacity of an element.<\/p>\n\n\n\n<p>The value of this property can range from 0.0 to 1.0.<\/p>\n\n\n\n<p>If the value of the opacity is 0, it means that the element is completely transparent, and an opacity value of 1 means that the element is completely non \u2013 transparent.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"CSS Opacity | Lecture 35 | CSS for Beginners\" width=\"696\" height=\"392\" src=\"https:\/\/www.youtube.com\/embed\/4sZOCGuz0Tc?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>You can refer to the below code to understand the opacity in a better way. For example, we are considering an image, and making its opacity to some value between 0.0 and 1.0, let&#8217;s say 0.5. Let&#8217;s have a look at the code, and how does the image looks like &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"466\" height=\"275\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Opacity.jpg\" alt=\"\" class=\"wp-image-548\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Opacity.jpg 466w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Opacity-300x177.jpg 300w\" sizes=\"auto, (max-width: 466px) 100vw, 466px\" \/><\/figure>\n<\/div>\n\n\n<p>So, we have created a class, with the name opacity1, with which, we are setting the opacity to 0.5 for example. Now, whatever element that belongs to this class, is going to have an opacity of 0.5. We have the heading and an image, which have the class opacity1. If we open the file in the browser, the output is going to be something like this &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1022\" height=\"357\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Opacity-1.jpg\" alt=\"\" class=\"wp-image-546\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Opacity-1.jpg 1022w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Opacity-1-300x105.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Opacity-1-768x268.jpg 768w\" sizes=\"auto, (max-width: 1022px) 100vw, 1022px\" \/><\/figure>\n<\/div>\n\n\n<p>If the opacity were 1, then the image and the heading would look something like this &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1023\" height=\"350\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Opacity-2.jpg\" alt=\"\" class=\"wp-image-547\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Opacity-2.jpg 1023w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Opacity-2-300x103.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Opacity-2-768x263.jpg 768w\" sizes=\"auto, (max-width: 1023px) 100vw, 1023px\" \/><\/figure>\n<\/div>\n\n\n<p>And, if you set the opacity to 0, then the image will become completely transparent, which means that the image and text would not be visible.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS Opacity This property tells how clear are you going to see some elements. This property specifies the transparency or opacity of an element. The value of this property can range from 0.0 to 1.0. If the value of the opacity is 0, it means that the element is completely transparent, and an opacity value [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[9,196,13],"class_list":{"0":"post-545","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css-tutorial","7":"tag-css","8":"tag-css-opacity","9":"tag-css-tutorial"},"_links":{"self":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/545","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/comments?post=545"}],"version-history":[{"count":3,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/545\/revisions"}],"predecessor-version":[{"id":5672,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/545\/revisions\/5672"}],"wp:attachment":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/media?parent=545"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/categories?post=545"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/tags?post=545"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}