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

要实现这个效果，你可以使用uniapp的uni-popup弹出层组件，并在弹出层中放置一个包含图片和文字的div元素。

具体步骤如下：

1. 在需要触发弹出层的组件上绑定一个点击事件，事件函数中调用uni.showPopup方法打开弹出层。

2. 在showPopup方法中传入一个包含图片和文字的div元素作为弹出层的内容，同时设置弹出层的样式和动画效果。

3. 在弹出层的背景层上添加一个点击事件，点击时调用uni.hidePopup方法关闭弹出层。

4. 在弹出层出现时，将页面背景颜色变暗，可以使用一个半透明的遮罩层实现。

示例代码如下：

<!-- 触发弹出层的组件 -->
<view @tap="showPopup">点击弹出层</view>

<!-- 弹出层 -->
<uni-popup v-model="show" position="bottom" :mask-closable="true" :show="show">
  <div class="popup-content">
    <img src="/static/image.jpg" alt="图片">
    <p>这是一段文字</p>
  </div>
</uni-popup>

<!-- 样式 -->
<style>
  .popup-content {
    text-align: center;
    padding: 20px;
  }
  .uni-popup__mask {
    background-color: rgba(0, 0, 0, 0.5);
  }
</style>

<!-- 脚本 -->
<script>
  export default {
    data() {
      return {
        show: false
      }
    },
    methods: {
      showPopup() {
        this.show = true
      }
    }
  }
</script>

注意：以上代码中的图片路径需要根据实际情况进行修改。