在网页设计中，透明度是一个非常有用的效果，它能帮助你创建出各种不同的视觉效果。在 css 中，设置元素的透明度可以通过 opacity 属性来实现。但是，如果只想让一个元素的背景透明而不影响其内部的 content（内容）呢？
这时，我们可以运用 CSS3 中的 rgba（red, green, blue, alpha）颜色模式来控制元素的不透明度。
具体实现方法是在 CSS 样式表中使用 rgba 颜色值来代替普通的 rgb 值。
rgba 颜色值由红、绿、蓝和一个 alpha 透明度值构成，透明度的值范围是从 0～1。当 alpha 的值为 0 时，元素完全透明；当 alpha 值为 1 时，元素完全不透明。
下面我们看一个示例：
立即学习“前端免费学习笔记（深入）”；
div {
background-color: rgba(0, 0, 0, 0.5);
}这个样式代码将使 div 元素的背景颜色变成半透明的黑色。其中的 rgba(0, 0, 0, 0.5) 表示红、绿、蓝三个色值分别为 0，表示黑色，而 0.5 的透明度表示半透明。
现在，我们来看看如何在一个 div 元素中实现不透明的 content。
实现方法：
- 设置
background-color属性为半透明颜色。例如：
div {
background-color: rgba(255, 255, 255, 0.5);
}这会让 div 元素的背景色变成半透明的白色。
- 将
opacity属性设置为 1，去掉背景颜色的不透明度。例如：
div {
background-color: rgba(255, 255, 255, 0.5);
opacity: 1;
}在这个样式代码中，我们将 opacity 属性设置为 1，去掉了背景颜色的透明度。这样，div 元素的文本就会变成不透明的，而背景颜色仍然保持半透明。
请注意，这种方式不会使 div 元素内的其他元素（如图片或嵌套的子 div 元素）变得不透明。如果你想让所有的元素都变得不透明，你需要将 opacity 属性也应用到这些元素上。
总结来说，通过运用 CSS3 的 rgba 颜色模式和 opacity 属性，我们可以轻松地设置元素的不透明度，并实现复杂的视觉效果。
