Есть много способов сделать фоновое изображение прозрачным, а содержимое непрозрачным, но я чаще всего использую псевдоэлемент before.
Все должны знать, что прозрачность использует непрозрачность, но непрозрачность сделает прозрачным все содержимое фона и его дочерних элементов, например:
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 500px;
height: 340px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: -170px;
opacity: 0.5;
background-image: url("./StudyCode/HTML5+CSS3/图片/哈利波特7.png");
}
.box2{
width: 200px;
height: 150px;
font-size: 40px;
font-weight: 500;
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -75px;
text-align: center;
line-height: 150px;
letter-spacing: 10px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">哈利波特</div>
</div>
</body>
</html>Полученные результаты следующие: Вы можете видеть, что шрифты также прозрачны.
Добавьте следующий код в приведенный выше css, чтобы решить эту проблему: не забудьте удалить последние две строки кода над .box1, иначе содержимое до этого будет перезаписано.
.box1::before{
width: 500px;
height: 340px;
content: "";
/* 一定要加定位，这样z-index才起作用 */
position: absolute;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: -170px;
z-index: -1;
opacity: 0.5;
background-image: url("./StudyCode/HTML5+CSS3/图片/哈利波特7.png");
}получил ответ:
