DIV背景半透明文字不半透明的样式

当需要在网页上实现背景半透明、且文字不半透明的效果时，一种解决方案是使用CSS3的RGBA色彩模式，将背景色中的alpha值（透明度）调整为小于1的值。

我们可以采用以下步骤来实现这个效果：

1. 创建HTML元素

首先需要在HTML中创建一个元素，并为其添加唯一的class或id属性，用于在CSS中引用。例如，我们创建了一个div元素，其class属性为“semi-transparent-bg”：

<div class="semi-transparent-bg">
  <p>这是一段文字，居中显示在半透明背景上</p>
</div>

2. 设置CSS属性

接下来，在CSS中设置该元素的属性，包括背景色和文字样式。背景色采用RGBA格式的颜色值，文字样式根据设计需要进行设置。

.semi-transparent-bg {
  background-color: rgba(0, 0, 0, 0.5); /* 改变 alpha 值来实现半透明效果 */
  width: 300px;
  height: 200px;
  margin: auto;
  text-align: center;
}
.semi-transparent-bg p {
  color: #fff;
  font-size: 24px;
}

示例1

通过以上步骤，我们就实现了一个带背景半透明文字不半透明的div元素。下面是一个完整的示例代码，该示例中展示了一个带有标题和图像的半透明元素：

<div class="semi-transparent-bg">
  <h2>这是一个标题</h2>
  <img src="image.png" alt="这是一张图片">
</div>

.semi-transparent-bg {
  background-color: rgba(255, 255, 255, 0.5);
  width: 400px;
  height: 300px;
  margin: auto;
  border-radius: 5px;
  text-align: center;
}
.semi-transparent-bg h2 {
  color: #333;
  font-size: 36px;
  margin-top: 20px;
}
.semi-transparent-bg img {
  display: block;
  max-width: 80%;
  margin: 20px auto;
}

示例2

下面是另一个示例，展示了如何在表格中添加带半透明背景的行，并保持文字不透明。该示例中使用了tr元素的:nth-child()选择器，使其只对奇数行添加半透明效果：

<table>
  <tr><td>第一行</td></tr>
  <tr><td>第二行</td></tr>
  <tr><td>第三行</td></tr>
  <tr><td>第四行</td></tr>
</table>

table tr:nth-child(odd) {
  background-color: rgba(255, 255, 255, 0.5);
}
table td {
  font-size: 18px;
  padding: 10px;
}

通过以上示例的代码和解释，相信可以轻松实现带背景半透明文字不半透明的效果。