方法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); }