CSS中的opacity属性用于设置元素的透明度。它是一个浮点数值，取值范围从0到1，其中0表示完全透明，1表示完全不透明。

使用opacity属性可以实现一些炫酷的效果。比如，可以通过设置一个带有透明度的背景图像来创建一个半透明的效果。例如：

```css

p {

background-color: rgba(255

0

0

0.5);

}

```

这里的rgba函数设置了一个红色的背景颜色，其中的alpha通道值为0.5，表示50%的不透明度。这样，元素就会显示为半透明的红色。

透明度也可以应用于文本，图片或其他元素。例如，可以通过设置文本的透明度来实现淡入淡出的效果。例如：

```css

h1 {

opacity: 0;

transition: 2s;

}

h1.show {

opacity: 1;

}

```

在此示例中，通过将h1元素的初始透明度设置为0，并设置一个过渡效果，当添加show类时，透明度将过渡变为1。这样就能够创建一个淡入的效果。

此外，opacity属性还会影响元素内部的所有内容。这就意味着，如果设置了父元素的透明度，其子元素也会受到影响。这对于创建浮层效果非常有用。例如：

```css

.overlay {

opacity: 0.5;

background-color: black;

position: fixed;

top: 0;

left: 0;

width: *;

height: *;

z-index: 9999;

}

.modal {

opacity: 1;

background-color: white;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%

-50%);

z-index: 10000;

}

```

在此示例中，.overlay类用于创建一个全屏的半透明黑色浮层。同时，.modal类用于在浮层上放置实际内容。由于.overlay元素和.modal元素是嵌套关系，即.modal元素是.overlay元素的子元素，所以.modal元素也会受到.overlay元素的透明度影响。这样就实现了一个浮层的效果。

需要注意的是，opacity属性会影响元素本身及其内容的透明度，而不仅仅是背景色。如果只想设置元素的背景透明度，而不影响其内容的透明度，可以使用rgba颜色值来设置背景颜色的透明度，或者使用background-color: transparent;来设置背景为透明。

总之，opacity属性为我们提供了一种简单而强大的方法来控制元素的透明度。它可以应用于文本、图片、背景色等元素，以实现不同的效果。