How to set background transparent text opaque in css

In web design, transparent background and opaque text are a common design technique, which can make the page look more beautiful and layered. Among them, CSS is a very powerful tool that can achieve transparent background and opaque text effects through CSS property settings.

1. CSS attribute opacity

The CSS attribute opacity is the key to achieving transparent background and opaque text. This attribute can control the transparency of the element. Its value range is 0 to 1, where 0 means completely transparent and 1 means completely opaque.

For example, the following CSS code sets the background of the div element to semi-transparent and the text to opaque:

div {
    background-color: rgba(255, 255, 255, 0.5); /* 背景半透明 */
    color: #000; /* 文字不透明 */
    opacity: 1; /* 元素不透明 */
}

As you can see, the transparency effect is achieved by setting the rgba value of the background, and then Set the element's opacity property to 1 to make the text opaque.

2. CSS properties background-color and rgba values

CSS properties background-color and rgba values ​​are also one of the important properties to achieve background transparency. background-color is used to set the background color of the element, and the rgba value can set the transparency of the color.

For example, the following CSS code sets the background of a div element to white translucent and the text to opaque:

div {
    background-color: rgba(255, 255, 255, 0.5); /* 背景白色半透明 */
    color: #000; /* 文字不透明 */
}

In this example, the last parameter in the rgba value, which is 0.5 , indicating the transparency of the color. This is set to 0.5, so when the background color is white, only 50% opacity is displayed.

3. CSS attribute background-image and background image

CSS attribute background-image and background image can also achieve the effect of transparent background and opaque text.

For example, the following CSS code sets the background of a div element to an image and then sets the text to opaque:

div {
    background-image: url('bg.jpg'); /* 背景图片 */
    color: #000; /* 文字不透明 */
}

In this example, the CSS property background-image specifies the div The element's background image, and then set the text to opaque. If the transparency of the background image is not 0, there will be a partial transparency effect.

Summary

In web design, using the technique of using transparent background and opaque text can make the page look more fresh, beautiful and layered. By learning the CSS opacity property, background-color and rgba values, background-image and background image properties, we can easily achieve this effect. It should be noted that when using this technique, it must be adjusted according to the specific situation to achieve the best visual effect.

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