包含文本的图像的包装器div不能同时更改图像的亮度滤镜和文本的不透明度滤镜

。这是因为CSS滤镜属性是应用于整个元素的，而不是单独应用于元素的不同部分。

要实现同时更改图像的亮度滤镜和文本的不透明度滤镜，可以考虑以下解决方案：

1. 分割图像和文本：将图像和文本分别放置在不同的元素中，例如使用两个div元素，一个用于包含图像，另一个用于包含文本。然后，分别对这两个元素应用不同的滤镜效果。

<div class="image-wrapper">
  <img src="image.jpg" alt="Image">
</div>
<div class="text-wrapper">
  <p>Text</p>
</div>

.image-wrapper {
  filter: brightness(50%);
}

.text-wrapper {
  opacity: 0.5;
}

1. 使用背景图像和伪元素：将图像作为div的背景图像，并使用伪元素(::before或::after)来添加文本内容。然后，对背景图像和伪元素分别应用不同的滤镜效果。

<div class="wrapper">
  <div class="text">Text</div>
</div>

.wrapper {
  position: relative;
  background-image: url(image.jpg);
  background-size: cover;
}

.wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.5;
}

.text {
  position: relative;
  z-index: 1;
}

这样，你可以通过分割元素或使用背景图像和伪元素来实现同时更改图像的亮度滤镜和文本的不透明度滤镜的效果。

腾讯云相关产品和产品介绍链接地址：

• 腾讯云图像处理（https://cloud.tencent.com/product/tci）
• 腾讯云内容分发网络（https://cloud.tencent.com/product/cdn）
• 腾讯云云服务器（https://cloud.tencent.com/product/cvm）
• 腾讯云云数据库 MySQL 版（https://cloud.tencent.com/product/cdb_mysql）
• 腾讯云人工智能（https://cloud.tencent.com/product/ai）
• 腾讯云物联网（https://cloud.tencent.com/product/iotexplorer）
• 腾讯云移动开发（https://cloud.tencent.com/product/mobile）
• 腾讯云对象存储（https://cloud.tencent.com/product/cos）
• 腾讯云区块链（https://cloud.tencent.com/product/baas）
• 腾讯云虚拟专用网络（https://cloud.tencent.com/product/vpc）
• 腾讯云安全加速（https://cloud.tencent.com/product/ddos）
• 腾讯云音视频处理（https://cloud.tencent.com/product/mps）
• 腾讯云元宇宙（https://cloud.tencent.com/product/mu）