Background Image not grabbing from Google Drive file.

huangapple
go评论88阅读模式
英文:

Background Image not grabbing from Google Drive file

问题

我正在开发一个需要视差效果的网站，但目前我是通过谷歌云盘和Notepad++运行它。出于某种原因，当我尝试使用 background-image: url(''); 时，它无法从谷歌云盘文件目录中获取图片。

这是我现在的代码。

  1. body,
  2. html {
  3.   height: 100%;
  4. }
  6. .parallax {
  7.   /* image I want parallax on */
  8.   background-image: url('G:\My Drive\Website\Parallax\TriangleHR.png');
  9.   /* Full height */
  10.   height: 100%;
  11.   /* Create scrolling effect */
  12.   background-attachment: fixed;
  13.   background-position: center;
  14.   background-repeat: no-repeat;
  15.   background-size: cover;
  16. }
  18. /* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed */
  20. @media only screen and (max-device-width: 1366px) {
  21.   .parallax {
  22.     background-attachment: scroll;
  23.   }
  24. }
  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.   <meta name="viewport" content="width=device-width, initial-scale=1">
  6.   <link rel="stylesheet" href="G:\My Drive\Website\Parallax\styles.css">
  7. </head>
  9. <body>
  10.   <div class="parallax"></div>
  12.   <div style="height:1000px;background-color:red;font-size:36px">
  13.     <p>Allows for scrolling.</p>
  14.   </div>
  16.   <div class="parallax"></div>
  18. </body>
  20. </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(&#39;&#39;);, 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 -->

  1. body,
  2. html {
  3.   height: 100%;
  4. }
  6. .parallax {
  7.   /* image I want parallax on */
  8.   background-image: url(&#39;G:\My Drive\Website\Parallax\TriangleHR.png&#39;);
  9.   /* Full height */
  10.   height: 100%;
  11.   /* Create scrolling effect */
  12.   background-attachment: fixed;
  13.   background-position: center;
  14.   background-repeat: no-repeat;
  15.   background-size: cover;
  16. }
  19. /* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed */
  21. @media only screen and (max-device-width: 1366px) {
  22.   .parallax {
  23.     background-attachment: scroll;
  24.   }
  25. }

<!-- language: lang-html -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  4. &lt;head&gt;
  5.   &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  6.   &lt;link rel=&quot;stylesheet&quot; href=&quot;G:\My Drive\Website\Parallax\styles.css&quot;&gt;
  7. &lt;/head&gt;
  9. &lt;body&gt;
  12.   &lt;div class=&quot;parallax&quot;&gt;&lt;/div&gt;
  14.   &lt;div style=&quot;height:1000px;background-color:red;font-size:36px&quot;&gt;
  15.     &lt;p&gt;Allows for scrolling.&lt;/p&gt;
  16.   &lt;/div&gt;
  18.   &lt;div class=&quot;parallax&quot;&gt;&lt;/div&gt;
  20. &lt;/body&gt;
  22. &lt;/html&gt;

<!-- 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:///"，如这里所提到的。

你可以尝试这样做：

  1. <!-- begin snippet: js hide: false console: true babel: false -->
  3. <!-- language: lang-css -->
  4. body,
  5. html {
  6.   height: 100%;
  7. }
  9. .parallax {
  10.   /* image I want parallax on */
  11.   background-image: url('file:///G:\My Drive\Website\Parallax\TriangleHR.png');
  12.   /* Full height */
  13.   height: 100%;
  14.   /* Create scrolling effect */
  15.   background-attachment: fixed;
  16.   background-position: center;
  17.   background-repeat: no-repeat;
  18.   background-size: cover;
  19. }
  22. /* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed */
  24. @media only screen and (max-device-width: 1366px) {
  25.   .parallax {
  26.     background-attachment: scroll;
  27.   }
  28. }
  30. <!-- language: lang-html -->
  31. <!DOCTYPE html>
  32. <html>
  34. <head>
  35.   <meta name="viewport" content="width=device-width, initial-scale=1">
  36.   <link rel="stylesheet" href="file:///G:\My Drive\Website\Parallax\styles.css">
  37. </head>
  39. <body>
  42.   <div class="parallax"></div>
  44.   <div style="height:1000px;background-color:red;font-size:36px">
  45.     <p>Allows for scrolling.</p>
  46.   </div>
  48.   <div class="parallax"></div>
  50. </body>
  52. </html>
  54. <!-- 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 -->

  1. body,
  2. html {
  3.   height: 100%;
  4. }
  6. .parallax {
  7.   /* image I want parallax on */
  8.   background-image: url(&#39;file:///G:\My Drive\Website\Parallax\TriangleHR.png&#39;);
  9.   /* Full height */
  10.   height: 100%;
  11.   /* Create scrolling effect */
  12.   background-attachment: fixed;
  13.   background-position: center;
  14.   background-repeat: no-repeat;
  15.   background-size: cover;
  16. }
  19. /* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed */
  21. @media only screen and (max-device-width: 1366px) {
  22.   .parallax {
  23.     background-attachment: scroll;
  24.   }
  25. }

<!-- language: lang-html -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  4. &lt;head&gt;
  5.   &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  6.   &lt;link rel=&quot;stylesheet&quot; href=&quot;file:///G:\My Drive\Website\Parallax\styles.css&quot;&gt;
  7. &lt;/head&gt;
  9. &lt;body&gt;
  12.   &lt;div class=&quot;parallax&quot;&gt;&lt;/div&gt;
  14.   &lt;div style=&quot;height:1000px;background-color:red;font-size:36px&quot;&gt;
  15.     &lt;p&gt;Allows for scrolling.&lt;/p&gt;
  16.   &lt;/div&gt;
  18.   &lt;div class=&quot;parallax&quot;&gt;&lt;/div&gt;
  20. &lt;/body&gt;
  22. &lt;/html&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月10日 22:27:49
  • 转载请务必保留本文链接：https://go.coder-hub.com/76219639.html
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定