1:定位+伪元素
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div class="bag"><div class="a">文字文字文字文字文字文字文字文字文字文字</div></div><style>.bag {width: 1000px;height: 500px;position: relative;background: rgba(255, 255, 255, 0.3);}.a::before {position: absolute;top: 0;left: 0;bottom: 0;right: 0;background: url(http://csssecrets.io/images/tiger.jpg) center no-repeat;width: 1000px;height: 500px;content: "";z-index: -1;}</style>
</body></html>
2:定位+蒙版
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div class="bag"><div class="a">文字文字文字文字文字文字文字文字文字文字</div></div><style>.bag {background-size: cover;width: 1000px;height: 500px;background: url(http://csssecrets.io/images/tiger.jpg) center no-repeat;position: relative;}.a {position: absolute;top: 0;left: 0;bottom: 0;right: 0;width: 1000px;height: 500px;background: rgba(255, 255, 255, 0.3);}</style>
</body></html>