Question

我正在尝试获取div的背景图片，以便在移动设备上按比例缩小，而我尝试过的所有方法都无法正常工作。该div包含导航和网站徽标，但也具有背景图片。我正在努力达到类似于该网站（http://www.gtroc.org/）的效果，而这正是我能够想到的。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Garage Godzilla</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<link href="https://fonts.googleapis.com/css?family=K2D" rel="stylesheet">


<link rel = "stylesheet" type = "text/css" href = "style.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


<script>
$(document).ready(function(){

$('body').css('display', 'none');
$('body').fadeIn(200);

});
</script>

</head>

<body>
<div class = "container-fluid">
<div class = "wrap">
<a href = "index.html"><h1 id = "headertext"><span style = "color:silver">Garage</span> <span style = "color:#c10000">Godzilla</span></h1> </a>

<nav class="navbar navbar-expand-sm justify-content-end">

<!-- Collapse button -->
<button class="navbar-toggler toggler-example" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1"
    aria-expanded="false" aria-label="Toggle navigation"><span class="dark-blue-text"><i class="fa fa-bars fa-1x"></i></span></button>

<div class="collapse navbar-collapse" id="navbarSupportedContent1">


<!-- Links -->
<ul class="navbar-nav nav-navbar">
<li class="nav-item">
<a class="nav-link" href="gtr-models.html">GT-R Models</a>
</li>
<li class="nav-item">
<a class="nav-link" href="racing-history.html">Racing History</a>
</li>
<li class="nav-item">
<a class="nav-link" href="images.html">Images</a>
</li>
</ul>
</div>
</nav>
</div>
</div>

</body>
</html>

CSS：

@font-face{
font-family: 'gtrfont';
src: url('Mission GT-R Condensed.ttf');
}

body, html{
height: 100%;
margin: 0;
}

h1{
font-family: 'roboto';
font-weight: bold;
padding: 50px 0 0 0;
text-align: center;
}

h2{
font-family: 'roboto';
text-align: center;
padding-top: 10px;
}

h4{
font-family: 'roboto';
padding-top: 20px;
text-transform: uppercase;
color: gray;
}

p{
font-family: 'roboto';
text-align: center;
}

.carousel-cell {
min-width: 100%; 
text-align: center;
}

.carousel-cell img{
max-width: 1000px;
max-height: 600px;
width: 100%;
height: 100%;
}

#KPGC10-racecar, #R32-racecar, #R33-racecar, #R34-racecar, #R35-racecar{
max-width: 900px;
display: block;
padding-top: 100px;
margin: auto;
}

#KPGC10-racecar img, #R32-racecar img, #R33-racecar img, #R34-racecar img, #R35-racecar img{
width: 100%;
height: auto;
}

 #KPGC10-racecar p, #R32-racecar p, #R33-racecar p, #R34-racecar p, #R35-racecar p{
padding-top: 10px;
text-align: left;
}

@media only screen and (max-width: 600px){
#KPGC10-racecar p, #R32-racecar p, #R33-racecar p, #R34-racecar p, #R35-racecar p{
padding-top: 10px;
text-align: left;
}
}

#introduction, #Nissan-Skyline-2000GT-R, #Nissan-Skyline-2000GT-R-KPGC110, #Nissan-Skyline-GT-R-R32, #Nissan-Skyline-GT-R-R33, #Nissan-Skyline-GT-R-R34, #Nissan-GT-R-R35{
max-width: 900px;
margin: auto;
padding-top: 100px;
}

#introduction img, #Nissan-Skyline-2000GT-R img, #Nissan-Skyline-2000GT-R-KPGC110 img, #Nissan-Skyline-GT-R-R32 img, 
#Nissan-Skyline-GT-R-R33 img, #Nissan-Skyline-GT-R-R34 img, #Nissan-GT-R-R35 img{
width: 100%;
height: auto;
}

#introduction p, #Nissan-Skyline-2000GT-R p, #Nissan-Skyline-2000GT-R-KPGC110 p, #Nissan-Skyline-GT-R-R32 p, 
#Nissan-Skyline-GT-R-R33 p, #Nissan-Skyline-GT-R-R34 p, #Nissan-GT-R-R35 p{
padding-top: 10px;
text-align: left;
}

@media only screen and (max-width: 600px) {
#introduction p, #Nissan-Skyline-2000GT-R p, #Nissan-Skyline-2000GT-R-KPGC110 p, #Nissan-Skyline-GT-R-R32 p, 
#Nissan-Skyline-GT-R-R33 p, #Nissan-Skyline-GT-R-R34 p, #Nissan-GT-R-R35 p{
padding-top: 10px;
text-align: left;
}
}

#footer{
padding: 100px 0 20px 0;
}

@media only screen and (max-width: 600px) {
.fa-1x {
font-size: 1.5rem;
color: white;
}
}

button:focus{
outline: 0;
}

.navbar-toggler.toggler-example {
cursor: pointer;
}


figcaption{
text-align: center;
}

.caption{
text-align: center;
padding-top: 10px;
padding-bottom: 100px;
}

#headertext{
font-family: 'gtrfont';
font-size: 50px;
padding: 15px 0 0 15px;
}


.container-fluid{
position: relative;
background-image: url("R35-GTR.png");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
width: 100%;
}
.container2{
padding-left: 50px;
}

.section-item{
padding-right: 10px;
line-height: 1.5;
display: inline;
color: gray;
}

.section-item a{
color: gray;
font-family: 'roboto';
font-size: 22px;
}

.section-item a:hover{
color: black;
}

@media only screen and (max-width: 600px) {
.section-item {
    padding-right: 10px;
}
}

li{
padding: 20px;
}

a{
color: white;
font-family: 'K2D';
font-size: 22px;
}


a:hover {
color: #A8A8A8;
text-decoration: none;
}

.wrap{
display: flex;
justify-content: space-between;
}

Answer 1

为此添加您的CSS代码。（x.png是您的图像路径）高度取决于您的选择。

<style type="text/css">
    div{
        background:url(x.png);
        width: 100%;
        height: 300
    }

Answer 2

检查一下。我已经放在顶部导航栏中。

https://codepen.io/anon/pen/pxdYaW

这些是更改：

.container-fluid{
  padding:0 !important;
}

.wrap {
  background:url(https://66.media.tumblr.com/7d594e256a441c7ed7d47c8f0b57a21e/tumblr_nfvozveK6E1rb8rndo1_1280.jpg);
  background-size:cover;
  padding:0 !important;
}

如何在div响应中制作背景图像

2 个答案: