# opacity property

The `opacity` property sets a transparency of an element. If the element is set to transparent, this means that the elements that lie underneath will be visible through it.

The property takes a fractional number from `0` to `1` as its value. In this case, the `0` value is complete transparency, and the `1` value is complete opacity. An intermediate value, for example `0.3`, sets the half transparency. Default value: `1`.

## Syntax

`selector { opacity: number from 0 to 1; }`

## Example

In this example, transparency is added to a block and the background of the parent is visible through a border and a text of this block:

`<div id="parent"> <div id="elem"> Lorem ipsum dolor sit amet. </div> </div>` `#parent { background-image: url("bg.png"); background-repeat: no-repeat; background-size: cover; display: inline-block; padding: 30px; } #elem { width: 300px; height: 200px; border: 20px solid red; padding: 10px; font-size: 50px; font-weight: bold; color: red; background: black; opacity: 0.7; }`

:

← →
↑
en ru