如何在此 html 页面中附加 url 的背景图像

Question

这里是 html 部分：


<!DOCTYPE html>
<html>
    <head>
        <title>Frozen</title>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Orbitron|Montserrat">
    </head>
    <body onload="showtime();">
        <div> 
        <h1>BATMAN</h1>
        <h2>
            
        <span id="h"></span>
        <span id="blink">:</span>
        <span id="m"></span>
        <span id="blink">:</span>
        <span id="s"></span>
        
        </h2>
            
        </div>
        
    </body>
</html>

这是 css 部分：

body {
    margin:0;
    padding:0;
    background-color:black;
}
h1{
    text-align:center ;
    color:black;
    font-variant:small-caps;
    text-shadow:  0 0 2px lime
               ,  0 0 4px lime
               ,  0 0 6px lime
               ,  0 0 8px lime;
               
}
div{
    width: 250px;
    height: 150px;
    background-color:black;
    border:1px solid lime;
    border-radius:10px 10px 10px 10px;
    margin:auto ;
    margin-top:20%;
    box-shadow: 0px 0px 10px 1px lime;
}
h2{
     color:black;
     font-family: Orbitron;
     font-size:33px;
     font-weight:bold ;
     text-align:center ;
     margin-top:20px;
}
#h,#m,#s{
      text-shadow:  0 0 2px lime
                 ,  0 0 4px lime
                 ,  0 0 6px lime
                 ,  0 0 8px lime;
}
#blink{
    text-shadow:  0 0 2px lime
               ,  0 0 4px lime
               ,  0 0 6px lime
               ,  0 0 8px lime;
    animation:animate 1s linear infinite;
}
@keyframes animate
{
    0%
    {
        color:lime;
        text-shadow:  0 0 2px lime
                   ,  0 0 4px lime
                   ,  0 0 6px lime
                   ,  0 0 8px lime;
    }
    100%
    {
        color:black;
        text-shadow:  0 0 2px black
                   ,  0 0 4px black
                   ,  0 0 6px black
                   ,  0 0 8px black;
    }
}

这是 JavaScript 文件：

function showtime()
{
    var a = document.getElementById("h");
    var b = document.getElementById("m");
    var c = document.getElementById("s");
    var i = document.getElementById("d");
    var time = new Date();
    var h = time.getHours();
    var m = time.getMinutes();
    var s = time.getSeconds();
    if(h<=9)
    {
        h= "0"+h;
    }
    if(m<=9)
    {
        m= "0"+m;
    }
    if(s<=9)
    {
        s="0"+s;
    }
    a.innerHTML = h;
    b.innerHTML = m;
    c.innerHTML = s;
    
}

setInterval(showtime ,1000);

基本上我是一个数字时钟名称BATMAN。 我想在那里附上一张背景图片 url ( https://drive.google.com/file/d/1ddfIP5iy9RAgG9lF5xGYgYGHKW_glrsy/view?usp=sharing )。 我在下面更改了我的样式脚本的正文元素：

<style>
body {
    margin:0;
    padding:0;
    background-image: url('https://drive.google.com/file/d/1ddfIP5iy9RAgG9lF5xGYgYGHKW_glrsy/view?usp=sharing');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
}
</style>

但它既没有显示在我的 html 页面中作为背景。 我下载图片并将其上传到我的驱动器中。 我想知道我的错误？ 我处于 CSS/CSS3 和 javascript 的初学者阶段。 我更擅长 HTML5/HTML。 我实现了 javascript 文件，但 css 文件中存在一些问题。 我敢肯定，如果任何专业的程序员/开发人员向我提出我的错误，我会明白的。 帮助...

Answer 1

可能是你的背景图片路径不工作，试试这个，它会工作

body { 
    margin: 0;
    padding: 0;
    background-color: black;
    background-image: url("https://kivabe.com/code/media/img/bg.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%; 
}

因此，如果您在本地计算机上开发项目，请确保您使用的是正确的背景图像路径。

假设您的项目文件/文件夹结构如下

 /project/ 
    |---index.html
    ├── css/
    │   └── style.css 
    ├── js/
    │   └──functions.js  
    └── images/
        └── image.png

那么你必须使用背景图像路径作为

background-image: url("../image.png");

如何在此 html 页面中附加 url 的背景图像

问题描述

1 个解决方案

解决方案1
2 已采纳 2020-07-26 06:37:57

如何在此 html 页面中附加 url 的背景图像

问题描述

1 个解决方案

解决方案1 2 已采纳 2020-07-26 06:37:57

解决方案1
2 已采纳 2020-07-26 06:37:57