背景圖像未顯示（使用偽選擇器）
[英]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.