我的网站上有这个视差图像(大自然的那个) This is how the page is normally seen
但它的尺寸不合适。当我打开 chrome 开发工具时,它看起来像下图,这就是我想要的样子。 this is the image how it needs to be (the nature image)
所以我想要的是:我希望在上面的图片中看到的自然图像在第二张图片中显示(使用 devtools)。我知道图片的尺寸不适合盒子。但我不知道如何修复它,也无法在 Internet 上找到。
有人可以帮我吗? 如果我的问题不够清楚,请回复我应该添加的内容!
我的 CSS 代码附加到图像视差:
.header{
background-image: url("nav-bg.png"); //The background image
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
.parallax-2 {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
HTML 代码:
<div class="header parallax-2">
<div class="logo fade-in-3"><img src="logo.png" alt="BeldrProductions" width="500"></div>
<!-- The nav-items go here. but i left them out to save space-->
</div>
希望尽快看到您的答复! 贝尔
注意: 来自以下答案的建议:
我在 JSfiddle 上的代码:https://jsfiddle.net/BeldrProductions/k5f70dy9/
答案 0 :(得分:0)
您必须将背景图像容器包装在另一个 div 中。 检查 HTML、CSS 片段以及屏幕截图。
<body>
<div class="header">
<div class="parallax-2">
<div class="logo fade-in-3">
<img src="logo.png" alt="BeldrProductions" width="500" />
</div>
</div>
<!-- The nav-items go here. but i left them out to save space-->
</div>
</body>
<style>
.header {
height: 300px;
width: inherit;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
}
.parallax-2 {
height: inherit;
width: inherit;
background-image: url("nav-bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
</style>
答案 1 :(得分:0)
感谢所有帮助过我的人。但我只是在没有图像的情况下使用它
谢谢,再见!
如果还有人有解决方案。请把它留在下面。我很想看。