Cara menggunakan javascript change background opacity

Example

Make a DIV element transparent:

document.getElementById("myDIV").style.opacity = "0.5";

Try it Yourself »

Definition and Usage

The opacity property sets or returns the opacity level of an element.

The opacity-level of an element describes the transparency-level, where 1 is not transperant at all, 0.5 is 50% see-through, and 0 is completely transparent.

Browser Support

Syntax

Return the opacity property:

Set the opacity property:

object.style.opacity = "number|initial|inherit"

Property Values

Technical Details

Related Pages

CSS reference: opacity property

You can control the transparency of HTML elements on a web page such as text, images or backgrounds with the help of the opacity property in CSS. In this tutorial, we will talk about CSS opacity and we will provide some examples to demonstrate how it works.

How CSS Opacity Works

The word opaque is used for describing objects that are fully visible, i.e. with no transparency. On a web page, a fully opaque element has an opacity value of 1 and a fully transparent element has an opacity value of 0. By default, all elements have an opacity value of 1. From 0 to 1, the opacity property controls the transparency level of the element. For example, the following code will make the div elements half transparent.

div { opacity: 0.5 }

An element with 0 opacity will be totally invisible; it will still occupy its physical space on the page but it won’t be visible. Hence, if you want to make an element invisible, you can use the opacity property, as well as the visibility property in CSS.

CSS opacity was introduced with CSS 3 and it has nice support among all major web browsers as of now. If your project requires you to support Internet Explorer 8 or older versions, you will need to also use the MS alpha filter property like the following:

div {
  opacity: 0.5;
  filter: alpha(opacity=50);
}

Note that while the opacity can have decimal values between 0 and 1, the alpha filter’s opacity values can range from 0% to 100%.

You can read further technical details and the specification of the CSS opacity property on the following links:

CSS Color Module Level 3 – Transparency / Opacity
MDN – CSS Opacity

Controlling the Opacity of Parent and Child Elements

Opacity is applied to the whole element uniformly. The child elements are also affected from the opacity value of their parent. You can apply different opacity levels to parent and child elements to achieve different levels of transparency like the following:

#parent { opacity: 0.8 }
#child { opacity: 0.5 }

The following examples will demonstrate how child elements are affected by their parents’ opacity:

In the first example above, both boxes have their opacity set to 1. In the second example, the parent box (black) has an opacity of 0.8 and the child (orange) has an opacity of 1. In the third example, the parent has an opacity of 0.8 and the child has an opacity of 0.5. Note the difference in the color tone (transparency) of the orange box across three examples.

Using CSS Opacity to Create Transparent Images

You can easily add a transparency effect to your images using the CSS opacity property. Let’s assume that we are displaying the same image two times on our page. The following code will make the second image transparent:

#img1 { opacity: 1 }
#img2 { opacity: 0.6 }

The result will be something like the following:

Changing Opacity on Hover

Following the above example of a transparent image, you can also control the transparency of images or other HTML elements on hover by changing their opacity. The following code will make the image transparent when you bring the mouse cursor on it.

#img1 { opacity: 1 }
#img1:hover { opacity: 0.6 }

Using CSS Opacity for Backgrounds

You can assign opacity to backgrounds in two ways. In the first way, you specify a value for the opacity property as you saw in the examples we worked on so far.

div {
  opacity: 0.5;
}

In the second way, you specify the alpha channel value in the RGBA (Red, Green, Blue, Alpha) declaration of the background color like the following:

div {
  background: rgba(0, 0, 0, 0.5);
}

By changing the R, G and B values, you can have a transparent background of any color. This is also how you can have non-transparent child elements inside a transparent element. Normally, the opacity value of the parent will descend to its child elements; however, by using a transparent background, you can leave the child elements to be opaque while keeping their container transparent.

Transparent Borders with CSS

If you are making use of large borders in your design and you need to apply opacity to them, you can assign an alpha channel value to the border color as shown in the following example:

.image-box {
  border: 15px solid rgba(0, 0, 0, 0.5);
}

This concludes our discussion about the opacity property. We provided various examples for different use cases and we hope that they will help you better understand how CSS opacity works.