我是学习 HTML 和 CSS 的初学者。我目前正在开发一个项目,正在使用媒体查询。我首先设计了桌面版本,因为这对我来说看起来更容易。那么为什么要设计移动版本,我不知道这就是为什么移动版本不显示背景图像(并且拍到背景图像非常正确)。我已经尽力了,这就是为什么你决定上平台询问。这是我的代码,请我想要知道我的错误。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="styles.css">
<!--fonts styles-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Lexend+Deca&display=swap" rel="stylesheet">
<title>Frontend Mentor | Stats preview card component</title>
</head>
<body>
<main class="container">
<div class="first">
<!--container for background image-->
</div>
<div class="second">
<h1>Get <span>insights</span> that help your business grow.</h1>
<p>Discover the benefits of data analytics and make better decisions regarding revenue, customer
experience, and overall efficiency.</p>
<div class="stats">
<dl>
<div>
<dt>10k+</dt>
<dd>companies</dd>
</div>
<div>
<dt>314</dt>
<dd>templates</dd>
</div>
<div>
<dt>12M+</dt>
<dd>queries</dd>
</div>
</dl>
</div>
</div>
</main>
</body>
</html>
/* Base styles */
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
font-size: 15px;
}
/*Card Styles*/
body {
background-color:hsl(233, 47%, 7%);
font-family: 'Inter', sans-serif;
font-weight: 400;
}
main {
width: 80%;
margin: 1.5em;
background-color: hsl(244, 38%, 16%);
display: grid;
grid-template-columns: 1fr 1fr;
margin: 8.5em auto;
border-radius: 6px;
}
.first {
background-image:url('images/image-header-desktop.jpg');
background-color: hsl(277, 64%, 61%);
background-blend-mode: multiply;
order: 1;
}
.second {
padding: 3em;
}
h1 {
color: hsl(0, 0%, 100%);
width: 350px;
}
h1 > span {
color: hsl(277, 64%, 61%);
}
p {
color: hsla(0, 0%, 100%, 0.75);
margin-top: 1em;
width: 400px;
font-family: 'Lexend Deca', sans-serif;
font-weight: 400;
line-height: 1.4;
}
dl {
margin-top: 3em;
display: flex;
justify-content: space-between;
}
dl dt {
color: hsl(0, 0%, 100%);
font-weight: 700;
font-size: 1.25rem;
}
dl dd {
font-variant-caps: all-petite-caps;
color: hsla(0, 0%, 100%, 0.6);
}
/*media query styles */
@media(max-width:480px) {
body {
min-height: 100vh;
padding: 0.5em;
}
main {
width: 100%;
grid-template-columns: 1fr;
}
.first {
background-image: url('images/image-header-mobile.jpg');
background-color: hsl(277, 64%, 61%);
background-blend-mode: multiply;
}
}
请提供任何帮助,我们将不胜感激。
我想在移动版本的代码中显示背景图像,但它没有显示
您必须给
.first
一个min-height
才能显示图像。
您可以根据需要调整值。
/* Base styles */
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
font-size: 15px;
}
/*Card Styles*/
body {
background-color: hsl(233, 47%, 7%);
font-family: 'Inter', sans-serif;
font-weight: 400;
}
main {
width: 80%;
margin: 1.5em;
background-color: hsl(244, 38%, 16%);
display: grid;
grid-template-columns: 1fr 1fr;
margin: 8.5em auto;
border-radius: 6px;
}
.first {
background-image: url('images/image-header-desktop.jpg');
background-color: hsl(277, 64%, 61%);
background-blend-mode: multiply;
order: 1;
}
.second {
padding: 3em;
}
h1 {
color: hsl(0, 0%, 100%);
width: 350px;
}
h1>span {
color: hsl(277, 64%, 61%);
}
p {
color: hsla(0, 0%, 100%, 0.75);
margin-top: 1em;
width: 400px;
font-family: 'Lexend Deca', sans-serif;
font-weight: 400;
line-height: 1.4;
}
dl {
margin-top: 3em;
display: flex;
justify-content: space-between;
}
dl dt {
color: hsl(0, 0%, 100%);
font-weight: 700;
font-size: 1.25rem;
}
dl dd {
font-variant-caps: all-petite-caps;
color: hsla(0, 0%, 100%, 0.6);
}
/*media query styles */
@media(max-width:480px) {
body {
min-height: 100vh;
padding: 0.5em;
}
main {
width: 100%;
grid-template-columns: 1fr;
}
.first {
background-image: url('https://picsum.photos/200/300'); /*for demonstration purpose, can be anything else*/
background-color: hsl(277, 64%, 61%);
background-blend-mode: multiply;
min-height: 300px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="styles.css">
<!--fonts styles-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Lexend+Deca&display=swap" rel="stylesheet">
<title>Frontend Mentor | Stats preview card component</title>
</head>
<body>
<main class="container">
<div class="first">
<!--container for background image-->
</div>
<div class="second">
<h1>Get <span>insights</span> that help your business grow.</h1>
<p>Discover the benefits of data analytics and make better decisions regarding revenue, customer experience, and overall efficiency.</p>
<div class="stats">
<dl>
<div>
<dt>10k+</dt>
<dd>companies</dd>
</div>
<div>
<dt>314</dt>
<dd>templates</dd>
</div>
<div>
<dt>12M+</dt>
<dd>queries</dd>
</div>
</dl>
</div>
</div>
</main>
</body>
</html>