Welcome Guest! (App Version 3.1)

websitnero logo name



  • All elements have their opacity value defaulted to 1.
  • An element with opacity 0 will be rendered as invisible but taking its alloted space on user-screen. It will just not be seen but still attached to the DOM tree.

Setting Opacity of Element in CSS

Opacity is used to set the Transparency of an html element. The value of '0' sets the transparency to zero. This means the element will now will have zero visibility and cannot be seen on screen, though it would take its space but just won't be visible. The value of '100' means that the element will be opaque or completely visible. Opacity of 0.5 means that element will be partially visible.


.p1 {background:pink; opacity:1;}
.p2 {background:pink; opacity:0.35;}

  <p class="p1">This is a paragraph 1.</p>
  <p class="p2">This is a paragraph 2.</p>


This is a paragraph 1.

This is a paragraph 2.

Further Reading

1. Opacity

WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.