背景图像未显示（使用伪选择器）
[英]Background image not showing up (using pseudo selector)
问题描述
为什么背景图片不显示？ 我几乎尝试了谷歌的所有方法，但我什么也看不到。 请给我一个解决方案。 :(
代码如下。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="home">
</div>
</body>
</html>
CSS
.home {
display:flex;
width:100vw;
height:100vh;
}
.home::before {
content: '';
display:block;
background:url(https://pixabay.com/photos/workplace-team-business-meeting-1245776/);
position:absolute;
width:100vw;
height:100vh;
top:0;
left:0;
}
3 个解决方案
解决方案1
1 2021-01-03 11:51:00
下载图像并写入图像的 url('...') 路径，或者您需要直接指向图像的路径：
https://cdn.pixabay.com/photo/2016/03/09/09/22/workplace-1245776_960_720.jpg
右击图片->查看图片
解决方案2
0 2021-01-03 11:12:27
.home::before {
content: '';
display:block;
background:url(".home::before {
content: '';
display:block;
background:url("https://cdn.pixabay.com/photo/2016/03/09/09/22/workplace-1245776_960_720.jpg");
position:absolute;
width:100vw;
height:100vh;
top:0;
left:0;
});
position:absolute;
width:100vw;
height:100vh;
top:0;
left:0;
}
注意：检查图像是否可用。 在公开使用之前检查许可证
解决方案3
0 2021-01-03 11:14:17
我认为问题出在您的照片中，因为我尝试过使用另一张照片，并且有效
.home {
display:flex;
width:100vw;
height:100vh;
}
.home::before {
content: '';
display:block;
background:url('https://unsplash.com/photos/O2o1hzDA7iE/download?force=true&w=1920');
position:absolute;
width:100vw;
height:100vh;
top:0;
left:0;
}
GatsbyJS - 在 CSS 中使用 SVG 作为伪背景图像
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.