个人中心
gpt4 book ai didi

html - 如何使div中的背景图像响应

转载 作者：行者123 更新时间：2023-11-28 00:58:54 25 4
gpt4 key购买 nike

我试图让 div 的背景图像在移动设备上按比例缩小，但我尝试过的所有方法都不起作用。这个 div 包含导航和站点 Logo ，还有一个背景图像。我正在尝试实现类似于此网站 ( 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;
}

最佳答案

将此添加到您的 CSS 代码中。 (x.png 是你的图片路径)高度取决于你的选择。

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

关于html - 如何使div中的背景图像响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52792596/

25 4 0
文章推荐： javascript - 光滑的旋转木马上的图像随着鼠标拖动而移动
文章推荐： javascript - 为什么链接需要在手机上双击才能进入链接？
文章推荐： javascript - 使用javascript单击div部分外部后如何删除文本样式？
文章推荐： javascript - JS 正则表达式 - 检查电话号码中的非数字字符
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com