How to make the background opaque in css

In web design, background color or background pattern are very important elements. However, sometimes you may want to make the background color or pattern transparent so that other elements can be displayed. This requires the use of CSS background opaque technology.

Implementation method

There are many ways to implement CSS background opacity:

1. Use color values ​​in RGBA format

RGBA format The color value contains four properties: red value (0-255), green value (0-255), blue value (0-255), and transparency (0-1). By setting the transparency property, you can make the background color or pattern opaque.

For example:

background-color: rgba(255, 255, 255, 0.5);

This style rule will add a white semi-transparent background to the page.

2. Using the opacity attribute

In CSS3, we can use the opacity attribute to set the transparency of an element. This property accepts a value between 0 and 1, with the default being 1, which means full opacity. 0.5 represents 50% opacity.

For example:

background-color: black;
opacity: 0.5;

This style rule will add a black semi-transparent background to the page.

3. Use background-color and background-image properties

We can also use the background-color and background-image properties at the same time to achieve background opacity. This method requires the image to be processed into a transparent PNG image first.

For example:

background-color: #000;
background-image: url(images/transparent-background.png);

This style rule will Add a black semi-transparent background image to the page.

Application Scenario

CSS background opacity is a very powerful technology that can be used to achieve a variety of effects.

1. Suspended prompt information

When the mouse moves over a link or button, we usually need to pop up a prompt box. In this case, we can use a semi-transparent background. accomplish.

For example:

.tooltip-wrapper {

position: relative;

}

.tooltip {

position: absolute;
top: 100%;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 10px;
display: none;

}

.tooltip-wrapper:hover .tooltip {

display: block;

}

This style rule will display a black translucent prompt box when the mouse hovers over the .tooltip-wrapper element.

2. Carousel chart fade-in and fade-out effect

Carousel chart is a very popular web design element. The fade-in and fade-out effect is one of the basic effects. You can use translucency Background and opacity properties to achieve this.

For example:

.banner {

position: relative;

}

.banner img {

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;

}

. banner img.active {

opacity: 1;

}

.banner .background {

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);

}

This style rule will add to the carousel image of the page A black translucent background, and a fade effect.

Summary

CSS background opacity is a very useful technology that can be used to achieve a variety of effects, such as floating prompt information and carousel fade effects. Try this technique when you need to make a background color or pattern transparent so that other elements can show through.

The above is the detailed content of How to make the background opaque in css. For more information, please follow other related articles on the PHP Chinese website!