为什么背景图片没有出现?我正在尝试在容器中添加背景图像并在中间添加文本。但图像没有出现。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.bgContainer {
background-image: url("https://images.unsplash.com/photo-1470219556762-1771e7f9427d?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8YnVpbGRpbmd8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60");
background-color: aliceblue;
background-blend-mode: overlay;
background-size: 100% 100%;
height: 50%;
}
.frContainer {}
</style>
</head>
<body>
<div class="container">
<div class="col-md-12 bgContainer">
<div class="col-md-12 frContainer">
Header for Image!
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分:0)
您正在尝试应用没有特定 width
和 height
为容器 CSS 样式指定 width
和 height
属性。
width: 100%;
height: 100vh;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.bgContainer{
background-image: url("https://images.unsplash.com/photo-1470219556762-1771e7f9427d?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8YnVpbGRpbmd8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60");
background-color:aliceblue;
background-blend-mode: overlay;
background-size: 100% 100%;
width: 100%;
height: 100vh;
}
.frContainer{
}
</style>
</head>
<body>
<div class="container">
<div class="col-md-12 bgContainer">
<div class="col-md-12 frContainer">
Header for Image!
</div>
</div>
</div>
</body>
</html>
答案 1 :(得分:0)
试试这个
.bgContainer{
background-image: url("https://images.unsplash.com/photo-1470219556762-1771e7f9427d?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8YnVpbGRpbmd8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60");
background-color:aliceblue;
background-blend-mode: overlay;
background-size: cover;
height:100vh;
}