gpt4 book ai didi

html - 如何在 CSS 中在另一个背景图像下显示背景图像

转载 作者:行者123 更新时间:2023-11-28 02:37:19 25 4
gpt4 key购买 nike

我正在尝试弄清楚如何在我的第一张图片下显示另一张背景图片。我对 HTML 和 css 很陌生,我想弄清楚一些事情,但似乎找不到。我知道图片在那里,因为当我添加 <p> 时在第二个背景图像的部分之间,您可以看到一小块图片(这可能是 <p> 标签的高度。)。所以我猜我的宽度和高度有问题。然而,我试图填写准确的高度和宽度,但这导致了一张非常放大的图片。也许这与错误使用 REM 有关?我不知道,我想这并不难做到,但我仍然没有成功。这是我到目前为止所拥有的。你不会看到这些图片,因为它们是本地的,我希望这无关紧要?非常感谢您的帮助!

编辑:为了清楚起见,有 2 个全屏图像(main.jpg 和 kampvuur.jpg 需要全屏显示,其他图像位于全屏背景图像之上,仅用于设计) https://imgur.com/a/5jeVh

html{
box-sizing: border-box;
font-size: 62.5%;
height: 100%;
}

*, *:before, *:after{
box-sizing: inherit;
margin: 0;
padding: 0;
}

body{
height: 100%;
}

.bg{
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
height: 100%;
}

.mainpage{
background-image: url(../assets/img/main.jpg);
}

.mainpage-text{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-bottom: 20rem;
height: 100%;
}

.title{
background-image: url(../assets/img/tentacion-small.png);
background-repeat: no-repeat;
height: 10rem;
width: 53.4rem;
margin-bottom: 2rem;
}

.titlespan{
visibility: hidden;
}

q{
background-image: url(../assets/img/quote-sm.png);
background-repeat: no-repeat;
width: 63rem;
height: 3.1rem;
}

.gif{
background-image: url(../assets/img/arrowdown.gif);
background-repeat: no-repeat;
width: 10rem;
height: 10rem;
}

.stars{
background-image: url(../assets/img/kampvuur.jpg);

}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>


<header class="bg mainpage">
<section class="mainpage-text">
<h1 class="title"><span class="titlespan">tentacion</span></h1>
<q><span class="titlespan">quote</span></q>
<div class="gif"></div>
</section>
</header>

<main>
<section class="bg stars">
<p>test</p>
</section>

</main>
</body>
</html>

最佳答案

您需要从 .message-text 中删除 padding-bottom 并更改此 css

.title{
background-image: url('https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png');
background-repeat: no-repeat;
height: 92px;
width: 272px;
margin-bottom:0;
}

html{
box-sizing: border-box;
font-size: 62.5%;
height: 100%;
}

*, *:before, *:after{
box-sizing: inherit;
margin: 0;
padding: 0;
}

body{
height: 100%;
}

.bg{
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
height: 100%;
}

.mainpage{
background-image: url('http://anatomyzone.com/wp-content/uploads/2014/01/skin3.general-boxed-bg-image.jpg');
}

.mainpage-text{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-bottom: 0rem;
height: 100%;
}

.title{
background-image: url('https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png');
background-repeat: no-repeat;
height: 92px;
width: 272px;
margin-bottom:0;
}

.titlespan{
visibility: hidden;
}

q{
background-image: url(../assets/img/quote-sm.png);
background-repeat: no-repeat;
width: 63rem;
height: 3.1rem;
}

.gif{
background-image: url(../assets/img/arrowdown.gif);
background-repeat: no-repeat;
width: 10rem;
height: 10rem;
}

.stars{
background-image: url(../assets/img/kampvuur.jpg);

}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>


<header class="bg mainpage">
<section class="mainpage-text">
<h1 class="title"><span class="titlespan">tentacion</span></h1>
<q><span class="titlespan">quote</span></q>
<div class="gif"></div>
</section>
</header>

<main>
<section class="bg stars">
<p>test</p>
</section>

</main>
</body>
</html>

关于html - 如何在 CSS 中在另一个背景图像下显示背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47352738/

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