Html 如何删除我的页面中间的白色条？_Html_Css

Html 如何删除我的页面中间的白色条？

html css

Html 如何删除我的页面中间的白色条？,html,css,Html,Css,我在页面中间放了一张背景图片，并使用了一张卡片。我有一个白色的横条，在所有的屏幕上，我不知道如何删除它以下是一个屏幕截图：这是我的密码 @介质（最小宽度：768px）{ html{ 背景图像：url（'https://static.lpnt.fr/images/2017/08/17/9763596lpw-9763750-article-melbourne-jpg_4493712_660x281.jpg'); 背景重复：无重复；背景大小：100%； } } 连接电子邮件将背景设置

我在页面中间放了一张背景图片，并使用了一张卡片。我有一个白色的横条，在所有的屏幕上，我不知道如何删除它

以下是一个屏幕截图：

这是我的密码


@介质（最小宽度：768px）{
html{
背景图像：url（'https://static.lpnt.fr/images/2017/08/17/9763596lpw-9763750-article-melbourne-jpg_4493712_660x281.jpg');
背景重复：无重复；
背景大小：100%；
}
}
连接
电子邮件

将背景设置为

正文

而不是

html

：


@介质（最小宽度：768px）{
身体{
背景图像：url（'https://static.lpnt.fr/images/2017/08/17/9763596lpw-9763750-article-melbourne-jpg_4493712_660x281.jpg');
背景重复：无重复；
背景大小：100%；
}
}
连接
电子邮件

也为你的身体添加透明


@介质（最小宽度：768px）{
html{
背景图像：url（'https://static.lpnt.fr/images/2017/08/17/9763596lpw-9763750-article-melbourne-jpg_4493712_660x281.jpg');
背景重复：无重复；
背景大小：100%；
}
}
连接
电子邮件

身体标签中有背景色

可以将背景色设置为透明

body {
    background-color: transparent;
 }

该问题是由与head标记关联的此行引起的

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

使用以下代码，问题将得到解决。我所做的更改是，我将主体的背景属性更改为透明，默认情况下由上面的标记指定。现在它工作得很好。希望能有帮助

<!doctype html>
<html lang="fr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    </head>

    <style type="text/css">
        @media (min-width: 768px) {
            html{
                background-image: url('https://static.lpnt.fr/images/2017/08/17/9763596lpw-9763750-article-melbourne-jpg_4493712_660x281.jpg');
                background-repeat: no-repeat;
                background-size: 100%;
            }
            body{
                background-color: transparent;
            }
        }
    </style>

    <body>
        <div class="container" style="background-color: transparent;">
            <main style="background-color: transparent;">
                <div class="col-md-12" style="background-color: transparent;">
                    <div class="card mx-auto" style="width: 18rem; margin-top: 25%; background-color: red">                     
                        <div class="card-body" >                            
                            <h6 class="card-title text-center">Connexion</h6>
                            <div class="form-group">
                                <label for="exampleInputEmail1">Email</label>
                                <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                            </div><br/>
                            <div class="text-center">
                                <a class="btn btn-primary" href="index.html">Se connecter</a>
                            </div>
                         </div>
                    </div>
                </div>
            </main>
        </div>
    </body>

</html>


@介质（最小宽度：768px）{
html{
背景图像：url（'https://static.lpnt.fr/images/2017/08/17/9763596lpw-9763750-article-melbourne-jpg_4493712_660x281.jpg');
背景重复：无重复；
背景大小：100%；
}
身体{
背景色：透明；
}
}
连接
电子邮件

太好了，谢谢！一般来说，除了给出一个函数代码示例外，还需要解释为什么答案有效。