html - 如何删除页面中间的白条?
问题描述
我放了一张背景图片,我在页面中间使用了一张卡片。我有一个横跨整个屏幕的白条,我不知道如何删除它。
这是一个屏幕截图:
这是我的代码
<!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 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%;
}
}
</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>
解决方案
将您的背景更改为设置为body
而不是html
:
<!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 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) {
body{
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%;
}
}
</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>
推荐阅读
- c# - 我在统一复制门时遇到问题
- javascript - 创建一个算法来定义 Javascript 中字符串的匹配概率
- c# - 如何最好地在 ASP.NET Core 中实现 Google 社交登录身份验证?
- visual-studio-app-center - Appcenter 通知管理(查看/隐藏某些用户的功能)
- html - CSS过滤器亮度:它可以分别应用于一个元素的边框和主体吗?
- solidity - 这是混音、编译器还是 openzeplin 错误?
- c++ - 比较从 Lua 中的 C 函数推送的字符串失败,除非复制到新字符串
- python-2.7 - 如何使用行编辑pyqt4调用函数
- c++ - 我正在编码节点结构,我认为这是构造函数初始化程序错误
- elasticsearch - Elasticsearch:禁用索引但将copy_to应用于字段