div透明但div内的子元素不透明的css代码

要实现div透明，但div内的子元素不透明，可以使用CSS的透明度属性和继承属性来实现。以下是一种实现方式：

HTML代码：

<div class="transparent-div">
  <div class="opaque-child">
    <p>子元素内容</p>
  </div>
</div>

CSS代码：

.transparent-div {
  background-color: rgba(0, 0, 0, 0.5); /* 设置背景颜色的透明度为0.5 */
  width: 200px;
  height: 200px;
}

.opaque-child {
  background-color: #fff; /* 子元素的背景颜色不透明 */
  opacity: 1; /* 子元素的透明度为1，即完全不透明 */
  width: 100px;
  height: 100px;
}

在上面的代码中，透明的div具有一个背景颜色的透明度为0.5，它的子元素则具有完全不透明的背景颜色。通过设置子元素的opacity属性为1，可以使子元素完全不透明，不受父元素的透明度影响