gpt4 book ai didi

html - 在 CSS 中滚动,页面不正确,滚动效果

转载 作者:行者123 更新时间:2023-12-04 13:30:27 26 4
gpt4 key购买 nike

对于我的网页,在创建背景图像时并不完全合适。就像我想要滚动效果,但只有一半的图像适合屏幕,没有滚动。我期望的是,每当您进入网站的登录页面时,您都会获得具有滚动效果的背景图像。 The below image is static
上图为静态图。
我想要什么样的图像粘贴在下面
Scrolling effect image
对于第二张图片,右侧有滚动条。
我尝试了所有组合,例如,
溢出滚动,背景图像:封面等。如何使背景图像可移动?垂直。

html{
background: url("homepagev1.png");
background-position: relative ;
content: " ";
padding: 0px 0px 0px 0px;
transform: translateZ(-2px) scale(0.8);
background-size: 90%;
z-index: -1;
display: flex;
overflow-y: auto;
overflow-x: hidden;
height: 10vh;
background-repeat: no-repeat;
}
Html 的代码片段
<body>
<header>
<a href="index.html" class="header-branch">pagename</a>
<nav>
<ul>
<li><a href="/">HOME</a></li>
<li><a href="/portfolio">Portfolio</a></li>
<a href="accounts/signup" class="webonlyversion">signup</a>
</nav>
</header>
<footer>
<ul class="main-link-mob">
<li><a href="">HOME</a></li>
<li><a href="">JOIN COMMUNITY</a></li>
</ul>
<ul class="main-link-web">
<b>"BE A PART OF THE COMMUNITY AND EXPLORE NEW THINGS"</b>
<li><a href="">SOCIAL</a></li>
<li><a href="/aboutus">ABOUT US</a></li>
</ul>
<div class="footer-sm">
<a href="#">
<img src="{% static 'icons/gmail.png' %}" alt="gmailicon">
</a>
<a href="#">
<img src="{% static 'icons/twitter.png' %}" alt="twittericon">
</a>
<a href="#">
<img src="{% static 'icons/instagram.png' %}" alt="instagramicon">
</a>
</div>
</footer>
</body>

最佳答案

像这样?您不能使用 background-size: coverbackground-size: contain ,但您仍然可以将其设置为 100%的宽度。

body {
background: url(https://images.pexels.com/photos/5990692/pexels-photo-5990692.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
background-attachment: scroll;
background-size: 100% auto;
}

div {
max-width: 400px;
margin: 8em auto;
background: #ccc;
padding: 5em;
opacity: 0.5;
min-height: 1000px;
}
<div> Hello </div>

关于html - 在 CSS 中滚动,页面不正确,滚动效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65414282/

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