英文:
Background Image not grabbing from Google Drive file
问题
我正在开发一个需要视差效果的网站，但目前我是通过谷歌云盘和Notepad++运行它。出于某种原因，当我尝试使用 background-image: url(''); 时，它无法从谷歌云盘文件目录中获取图片。
这是我现在的代码。
body,
html {
height: 100%;
}
.parallax {
/* image I want parallax on */
background-image: url('G:\My Drive\Website\Parallax\TriangleHR.png');
/* Full height */
height: 100%;
/* Create scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed */
@media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="G:\My Drive\Website\Parallax\styles.css">
</head>
<body>
<div class="parallax"></div>
<div style="height:1000px;background-color:red;font-size:36px">
<p>Allows for scrolling.</p>
</div>
<div class="parallax"></div>
</body>
</html>
这应该在所有电脑/笔记本电脑上启用视差效果，并在所有手机上禁用它，以减轻压力/延迟。然而它甚至都不显示图片。
英文:
I am working on a website that requires parallax, but I am currently running it out of Google Drive and Notepad++. For some reason, when I try to use background-image: url('');, It does not pull up the image from the Google Drive file directory.
Here is the code I have right now.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
body,
html {
height: 100%;
}
.parallax {
/* image I want parallax on */
background-image: url('G:\My Drive\Website\Parallax\TriangleHR.png');
/* Full height */
height: 100%;
/* Create scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed */
@media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="G:\My Drive\Website\Parallax\styles.css">
</head>
<body>
<div class="parallax"></div>
<div style="height:1000px;background-color:red;font-size:36px">
<p>Allows for scrolling.</p>
</div>
<div class="parallax"></div>
</body>
</html>
<!-- end snippet -->
This should activate parallax for all computers/laptops and disable it for all phones for less stress/lag.
However it doesn't even show the image at all.
答案1
得分: 1
我认为你可能错过了 "file:///"，如这里所提到的。
你可以尝试这样做：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
body,
html {
height: 100%;
}
.parallax {
/* image I want parallax on */
background-image: url('file:///G:\My Drive\Website\Parallax\TriangleHR.png');
/* Full height */
height: 100%;
/* Create scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed */
@media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="file:///G:\My Drive\Website\Parallax\styles.css">
</head>
<body>
<div class="parallax"></div>
<div style="height:1000px;background-color:red;font-size:36px">
<p>Allows for scrolling.</p>
</div>
<div class="parallax"></div>
</body>
</html>
<!-- end snippet -->
英文:
I think you might have missed "file:///"
as mentioned here
You can try doing:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
body,
html {
height: 100%;
}
.parallax {
/* image I want parallax on */
background-image: url('file:///G:\My Drive\Website\Parallax\TriangleHR.png');
/* Full height */
height: 100%;
/* Create scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed */
@media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="file:///G:\My Drive\Website\Parallax\styles.css">
</head>
<body>
<div class="parallax"></div>
<div style="height:1000px;background-color:red;font-size:36px">
<p>Allows for scrolling.</p>
</div>
<div class="parallax"></div>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论