×

CSS Opacity

The CSS Opacity property is used to set the clarity of the image. It is defined as degree and specify the transparency of an element.

Note: Opacity value will be less than 1.

Let us see an example of CSS opacity:

<!DOCTYPE html>    
<html>    
<head>    
<style>    
img.traspar{    
    opacity: 0.5;    
    filter: alpha(opacity=40); /* For IE8 and earlier */    
}    
</style>    
</head>    
<body>    
<p>without Opacity Image</p>    
<img src="image/opacity-img.png">    
<p>Transparent Image</p>    
<img class="traspar" src="image/opacity-img.png">    
</body>    
</html>


Related Topics

CSS Pagination

CSS Pagination The pagination in CSS is an advantageous approach for indexing of a website’s distinct pages over the homepage. When our site contains multiple pages, we must insert a few...

13 minutes read.

CSS Color Keywords

Here, we will discuss the following keywords: transparent currentcolor Inherit Transparent keyword A color can generally be made transparent by using the transparent keyword. Often it is used to for all intents...

4 minutes read.

Divi in CSS

Divi is popular WordPress themes due to its versatility and user-friendly interface. It includes a built-in page builder for sophisticated design options and an assortment of customization features to help...

9 minutes read.

CSS Text-decoration

CSS Text-decoration: It is an essential property of CSS that is used to decorate the content of the text. It can add-on the lines above, under, and over the text....

3 minutes read.

CSS Page-break-after Attribute

Page-break-after Attribute As its name implies, the page-break-before property is applied to include page break after any element, at the time of printing a document. It adds the page break after...

5 minutes read.

CSS Important

CSS Important: CSS !important property is used to provide more importance, as compared to other CSS properties. The meaning of this property is “This is important.” This property enables CSS...

2 minutes read.

CSS Pseudo-elements

Pseudo-elements The pseudo-classes in CSS can be represented as any keyword which is connected to the selector that represents any selected element’s unique state. On the other hand, pseudo-elements can be...

6 minutes read.

CSS Vertical Align

Vertical Align The vertical align CSS property describes the cell box of the table and an inline alignment vertically. This property is a self-explanatory and an essential property in CSS. But,...

2 minutes read.

CSS Background

CSS Background The properties of CSS background are applied to describe the effects of background on the element. Here are five properties of background that affects various elements of HTML: Background-colorBackground-imageBackground-repeatBackground-attachment Background-position Background-color The color of the background...

7 minutes read.

Untitled Reusable Block

  ...

1 minute read.

CSS Table

CSS table provides better look and feel. There are various properties of CSS table that are given below. border border-collapse padding width height text-align color background-color CSS Table Border You can set...

4 minutes read.

CSS Transition

CSS Transition The transitions in CSS are influenced, included to modify the component from one design to another, without the use of the JavaScript or Flash. We should describe two of the...

2 minutes read.

How to use google fonts in CSS

Fonts: - Fonts are used to make our website look more beautiful. Choosing appropriate font according to the web design or layout is also important. Many typefaces are accessible in...

4 minutes read.

CSS z-index Property

CSS z-index: CSS z-index permits us to represent any visual hierarchy over a 3D plane that is the z-axis. This index can be applied to describe the positioned element’s stacking...

2 minutes read.

CSS Word-spacing

Word-spacing The work-spacing property of CSS is applied to manage the space among the words. We can decrease or increase the space among the words by the use of this property. It...

3 minutes read.

CSS Specificity

CSS Specificity: If one or more conflicting rules of CSS express a similar element, a browser will pursue a few rules to examine the specific one. Specificity can be specified...

3 minutes read.

CSS Clip

CSS Clip The Clip property in CSS describes the element’s visible area. It applies over the elements which are absolutely positioned (position: absolute ;). Generally, it is used when an image...

2 minutes read.

CSS Variables

CSS Variables These variables of CSS are applied to add the custom property values to our various web-pages. The custom properties are often called as CSS variables or cascading variables. Various...

4 minutes read.

CSS Selector

CSS Selector: There are some selectors used in CSS, which allows us to choose the content we wish to style. Various selectors are considered as the separation of the set...

5 minutes read.

CSS Inline

What is CSS? CSS is an acronym for Cascading Style Sheets. CSS is the language that we use to style an HTML document. It specifies how HTML components should appear. CSS...

4 minutes read.