uniapp 点击出来一个图片加文字 同时背景变暗

你可以通过使用uniapp的popup组件和遮罩实现这个效果。具体步骤如下：

1. 在需要触发弹出窗口的元素上添加点击事件。

2. 在事件处理函数中，设置popup组件的显示状态为true，并设置popup组件的内容为图片和文字。

3. 在popup组件中添加一个遮罩层，并设置其背景色为半透明黑色，以实现背景变暗的效果。

以下是一个示例代码：

<!-- 在需要触发弹出窗口的元素上添加点击事件 -->
<view @click="showPopup">点击查看图片</view>

<!-- 在页面底部添加popup组件 -->
<popup :show.sync="isPopupShow" position="bottom">
  <!-- 添加遮罩 -->
  <view class="mask"></view>
  <!-- 弹出窗口的内容 -->
  <view class="popup-content">
    <image src="/static/images/picture.jpg"></image>
    <text>这是一张美丽的图片</text>
  </view>
</popup>

export default {
  data() {
    return {
      isPopupShow: false,
    };
  },
  methods: {
    showPopup() {
      this.isPopupShow = true;
    },
  },
};

/* 遮罩的样式 */
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

/* 弹出窗口的样式 */
.popup-content {
  position: relative;
  background-color: #fff;
  padding: 20rpx;
  text-align: center;
}

.popup-content image {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 10rpx;
}

.popup-content text {
  font-size: 30rpx;
}

注意：以上代码只是示例代码，你需要根据自己的实际需求进行修改和调整。