Html 使用CSS在Div中未正确显示背景图像
我有一个网站，其中标题图像没有在手机上正确显示。我使用的是Bootstrap4，所以网站应该是响应性的。但当我在移动浏览器中加载我的站点时，标题图像会重复。我删除了css中的no repeate，但是图像覆盖了div的一半，另一半是空白的。标题在笔记本电脑和台式机中工作正常。只是手机，我在显示上有问题。 这里是网站 HTML代码Html 使用CSS在Div中未正确显示背景图像,html,css,bootstrap-4,background-image,Html,Css,Bootstrap 4,Background Image,我有一个网站，其中标题图像没有在手机上正确显示。我使用的是Bootstrap4，所以网站应该是响应性的。但当我在移动浏览器中加载我的站点时，标题图像会重复。我删除了css中的no repeate，但是图像覆盖了div的一半，另一半是空白的。标题在笔记本电脑和台式机中工作正常。只是手机，我在显示上有问题。 这里是网站 HTML代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- PAGE settings -->
<link rel="icon" href="https://templates.pingendo.com/assets/Pingendo_favicon.ico">
<title>JV Computer Service</title>
<meta name="description" content="JV Computer Service main page">
<meta name="keywords" content="Desktop Support, Computer Repair, Virus Removal, Data Recovery, Server Administration, Printer Repair, Network Installation, Wireless, Website Development">
<meta name="author" content="JV Computer Servic"e>
<!-- CSS dependencies -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="wireframe.css">
<link rel="stylesheet" href="custom.css">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container"> <button class="navbar-toggler navbar-toggler-right border-0" type="button" data-toggle="collapse" data-target="#navbar13">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar13"> <a class="navbar-brand d-none d-md-block" href="#">
<img class="head-logo" src="../../work/graphics/logo.png" width="30" height="30" class="d-inline-block align-top" alt="" >
<b><span class="title"> JV Computer Service</span> (305) 680 4659</b>
</a>
<ul class="navbar-nav mx-auto">
<li class="nav-item"> <a class="nav-link" href="index.html">Home</a> </li>
<li class="nav-item"> <a class="nav-link" href="services.html">Services</a> </li>
<li class="nav-item"> <a class="nav-link" href="index.html#about">About</a> </li>
<li class="nav-item"> <a class="nav-link" href="support.html">Support</a> </li>
<li class="nav-item"> <a class="nav-link" href="index.html#contact">Contact</a> </li>
</ul>
<ul class="navbar-nav">
<li class="nav-item"> <a class="nav-link" href="https://twitter.com/geoVT25" target="_blank">
<i class="fa fa-twitter fa-fw"></i>
</a> </li>
<li class="nav-item"> <a class="nav-link" href="https://www.facebook.com/pctechtips25" target="_blank">
<i class="fa fa-facebook fa-fw"></i>
</a> </li>
<li class="nav-item"> <a class="nav-link" href="https://www.youtube.com/channel/UCOH7oeWBE2pgcFPFmj7lCqw" target="_blank">
<i class="fa fa-fw fa-youtube"></i>
</a> </li>
</ul>
</div>
</div>
</nav>
<div class="text-center py-5 head-section" >
<div class="container">
<div class="row my-5 justify-content-center">
<div class="col-md-9">
<h1><strong>Simplified IT Solutions</strong></h1>
<h2 class="bg-warning">Technology solutions for small business and homes</h2>
<a href="#services" class="btn m-2 btn-success">learn more</a>
<a href="#contact" class="btn m-2 btn-success">get support</a>
</div>
</div>
</div>
</div>
<div class="py-4 bg-light" id="services">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="text-center">Services</h1>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="lead text-center">Bellow you can see a brief description of our services and price. These fall into three main category: Desktop Support, System Maintanance, and Network Installation. If you would like to know more details, go to the Service page.</p>
</div>
</div>
<div class="row">
<div class="col-md-4 p-3">
<div class="card box-shadow rounded border border-secondary" >
<img class="card-img-top" src="assets/styleguide/thinkstockphotos-479282847.jpg">
<div class="card-body">
<h3 class="text-center">Desktop Support</h3>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<a class="btn btn-primary" href="#">learn more</a>
<h5 contenteditable="true">60 $ 1hr</h5>
</div>
</div>
</div>
</div>
<div class="col-md-4 p-3">
<div class="card box-shadow border border-secondary rounded">
<img class="card-img-top" src="assets/styleguide/photo-1506399309177-3b43e99fead2.jpg">
<div class="card-body">
<h3 class="text-center">System Administration</h3>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<a class="btn btn-primary" href="#">learn more</a>
<h5 style="">100 $ 1hr</h5>
</div>
</div>
</div>
</div>
<div class="col-md-4 p-3">
<div class="card box-shadow border border-secondary rounded">
<img class="card-img-top" src="assets/styleguide/photo-1544197150-b99a580bb7a8.jpg">
<div class="card-body">
<h3 class="text-center">Network Installation</h3>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<a class="btn btn-primary" href="#">learn more</a>
<h5>150 $ 1hr</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="py-5 text-center bg-primary" id="about">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="mb-3">About Us</h1>
<p>JV Computer Service is a small Computer Repair and IT Solution company. It's own and operated by its owner who has over 20 years experience in the computer and IT field. He acquired most of his experience working for the school district and managing and supporting multiple schools with over 500 computers. During that time he was responsible for providing user support, and system administration.<br>He was responsible for the management and completion of several projects. One project, involved the installation of more than 100 computers in a new student building. This project included physical installation of PC's, cabling, and rolling out the operating system and different application. </p>
</div>
</div>
</div>
</div>
<div class="py-5 bg-dark" id="contact">
<div class="container">
<div class="row">
<div class="mx-auto text-center col-lg-8">
<h1 class="mb-3">Contact Us</h1>
<p class="lead mb-4">If you experiencing any computer issues, lets us assist you. Fill the form bellow with a description and phone</p>
</div>
</div>
<div class="row">
<div class="p-0 order-2 order-md-1 col-lg-6"> <iframe width="100%" height="350" src="https://maps.google.com/maps?hl=en&q=New%20York&ie=UTF8&t=&z=14&iwloc=B&output=embed" scrolling="no" frameborder="0"></iframe> </div>
<div class="px-4 order-1 order-md-2 col-lg-6">
<h2 class="mb-4">Create a ticket</h2>
<form>
<div class="form-group"> <input type="text" class="form-control" id="form44" placeholder="Name"> </div>
<div class="form-group"> <input type="email" class="form-control" id="form45" placeholder="Email"> </div>
<div class="form-group"> <textarea class="form-control" id="form46" rows="3" placeholder="Your message"></textarea> </div> <button type="submit" class="btn btn-primary">Send</button>
</form>
</div>
</div>
</div>
</div>
<footer class="py-5 bg-secondary text-dark">
<div class="container">
<p class="float-right text-dark">
<a href="#">Back to top</a>
</p>
<p>JV Computer Service website was designed with Pingendo and Bootstrap<br>All rights reserved JV Computer Service LLT</p>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
这应该可以做到：
背景尺寸：封面您希望在手机中发生什么？如果不希望重复，也不希望标题的另一半为空，请准确描述应该发生什么。是否要缩放图像，使其与标题一样高，然后仅显示图像最左侧的部分？删除“从css代码背景重复：重复；.head徽标的css无效，这就是为什么不应用样式请尝试使用媒体查询减少移动视图中横幅内容的字体大小，以提高背景图像的可见性。我认为背景大小：100%与封面几乎相同。但显然不是。。
.head-logo {
background-image: url(assets/styleguide/logo.png);
background-position: top left;
background-size: 100%;
background-repeat: repeat;"
}
.title {
color:#f9b751;
}
.head-section {
background-image: url(assets/styleguide/jonathan-SwVkmowt7qA-unsplash.jpg);
background-position: left top;
background-size: 100%;
background-repeat: repeat;
}
.card {
border-style: solid;
}
.card-img-top {
background-position: top left;
background-size: 100%;
background-repeat: no-repeat;
}