方法1 背景圖+定位

<div class="btn1">
　　<div class="btn11">
　　　　 <span>文字</span>
　　 </div>
</div>

.btn1 {
　　width: 120px;
　　height: 150px;
　　background: url("../assets/1.jpg") no-repeat;
　　background-size: cover;
　　position: relative;
}
.btn11 {
　　position: absolute;
　　left: 0;
　　right: 0;
　　top: 0;
　　bottom: 0;
　　width: 120px;
　　height: 150px;
　　line-height: 150px;
　　text-align: center;
　　background: rgba(225, 225, 225, 0.5);
}
 

方法2 背景圖+偽類+filter:blur(1px)

<div class="btn1">
　　<span>文字</span>
</div>

.btn1 {
　　width: 120px;
　　height: 150px;
　　text-align: center;
　　line-height: 150px;
}
 .btn1::before{
   width: 120px;
　　height: 150px;
　　background: url("../assets/1.jpg") no-repeat;
　　background-size: cover;
　　content: "";
　　position: absolute;
　　top: 0;
　　left: 0;
　　z-index: -1;
　　-webkit-filter: blur(1px);
　　filter: blur(1px);
}