背景图片设置透明度而不改变内容

想到透明度自然就想到了css的opacity: 0.5;但是如果就这样设置的话，会导致整个div所有内容都变成透明的。如下图：

img

那么如何实现只让背景图片透明呢？

1557200346335

方法一

弄一个透明的背景图片哈哈哈哈

方法二

把图片设置透明度（这是通过本地图片设置背景图片，详情参考<a href="https://blog.csdn.net/qq_42002651/article/details/89460078">设置背景图片</a>），而整个div不设置

<view class='item'>
    <image class='back' src='/images/mother.jpg'></image>
</view>   

.item{
  width: 90%;
  margin-left: 5%;
  margin-top: 20rpx;
  height: 200rpx;
  position: relative;
  overflow: hidden;
  border-radius: 10rpx; 
}
.back{
  width: 100%;
  position: absolute;
  z-index: -1;
  opacity: 0.2;
}

方法三

这个方法和上面的差不多的意思，两个div一个设置透明度，总的不设置

<view class="container">
  <view class='bg'></view>
  <!-- <image src='../image/1.jpg'></image> -->
  <view class='up'>
    ssssssadmn
  </view>
</view>

.container{
  width: 100%;
  height: 600rpx;
  margin: 0;
  padding: 0;
  position: relative;
}
.bg{
  width: 100%;
  height: 600rpx;
  position: absolute;
  background: url(https://note.youdao.com/yws/api/personal/file/6D19FC418F2A4693848568E9BFEE079F?method=download&shareKey=7c8b37fbf4504210dcbcd725f63bd85a);
  background-size: cover;
  opacity: 0.5
}

方法四

使用伪类before，设置背景透明度,

  <view  class="demo1">背景图</view>

.demo1{
    width: 500px;
    height: 300px;
}
.demo1:before{
    background: url(http://www.pptok.com/wp-content/uploads/2012/08/xunguang-4.jpg) no-repeat;
    background-size: cover;
    width: 500px;
    height: 300px;
    content: "";  /* 这个不要漏了 */
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1; /*-1 可以当背景*/
    opacity: 0.5
}