gpt4 book ai didi

html - CSS 背景图像不显示?

转载 作者:太空宇宙 更新时间:2023-11-03 23:09:18 25 4
gpt4 key购买 nike

我在尝试用 CSS 显示背景图像时突然遇到了问题。

图像是不可见的!

在进一步向下滚动到另一个图像或背景之前,我尝试专门针对页面上的特定位置使用此背景图像。

谁能阐明这种情况并可能提供正确的代码/解释我为什么错了?

提前致谢!

HTML:

    <!doctype html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='style.css'/>
</head>
<body>
<div class="main">
<div class="container">
<h1>Move</h1>
<p> Form healthy habits to take your fitness to the next level. </p>
<a href="www.google.co.uk"> Start Now </a>
</div>
</div>

<div class="supporting">
<div class="container">
<div class="col">
<h2>Move</h2>
<p>Become more active by tracking your runs, rides, and walks.</p>
</div>


<div class="clearfix"></div>
</div>
</div>


<div class="feature">
<div class="container">

</div>
</div>


</body>
</html>

CSS:

html, body {
margin: 0;
}

h1, h2, a {
font-family: 'Oswald', sans-serif;
}

p {
font-family: Helvetica, Arial, sans-serif;
}

.container {
width: 940px;
margin: 0 auto;
}

/* Main */
.main {
background-image: url ("https://yt3.ggpht.com/-QkqvzArFkYs/AAAAAAAAAAI/AAAAAAAAAAA/qw97foQDUbQ/s900-c-k-no/photo.jpg");
height: 600px;
}

.main h1 {
font-size: 150px;
color: white;
text-align: center;
}

.main p {
font-size: 18px;
}


/* Supporting */
.supporting {
text-align: center;
padding: 50px 0 80px;
}

.supporting .col {
float: left;
width: 28%;
padding: 10px;
}

.supporting h1,
.supporting h2 {
color: #ffa800;
font-size: 20px;
margin-bottom: 10px;
}

.clearfix {
clear: both;
}

.supporting p {
color: #efefef;
margin-bottom: 20px;
line-height: 20px;
font-size: 12px;
}

.supporting .btn {
background-color: #eee;
color: #1c1c1c;
font-size: 18px;
padding: 8px 30px;
text-decoration: none;
display: inline-block;
}

/* Feature */
.feature {
height: 600px;
}

.feature h1,
.feature h2 {
color: #fff;
font-size: 40px;
margin: 0;
padding:50px 0 0;
}

/* Footer */
.footer {
height: 600px;
}

.footer h1,
.footer h2 {
color: #fff;
font-size: 40px;
margin: 0 0 20px 0;
padding:50px 0 0;
}

.footer p {
color: #fff;
margin: 0 0 20px 0;
font-size: 18px;
}


@media (min-width:600px) {
.main h1 {
font-size: 200px;
}

.supporting .col {
width: 30%;
}

.supporting h2 {
font-size: 40px;
}

.supporting p {
font-size: 14px;
}

.feature h2 {
font-size: 60px;
}
}

最佳答案

在您的 CSS 中删除 url( 之间的空格。

关于html - CSS 背景图像不显示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33379175/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com