gpt4 book ai didi

html - 带边框的全屏背景图片

转载 作者:太空宇宙 更新时间:2023-11-04 11:16:22 29 4
gpt4 key购买 nike

我需要(但未能)做的是如下图所示的网站:

网站需要全屏且无滚动。我对结果不满意,因为:

-在竖屏(智能手机)上打开网站时底部边框太大

-我还尝试让这个背景图像的顶部和底部完全显示(我希望顶部和底部的面孔能够完整显示,而不仅仅是部分显示),但我真的不知道该怎么做。

我的 CSS 代码:

html
{

background: #f36d32;
width: 98%;
height: 95.9%;
padding: 1%;

}

body
{
background: url(http://web-industry.eu/landing/img/bg.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
}

好的,边界问题被@imGaurav用这样一段代码解决了:

body {
background: url('http://web-industry.eu/landing/img/bg.png') no-repeat;
background-size: 100% 100%;
width: 100vw;
height: 100vh;
box-sizing: border-box;
border: #f36d32 3px solid;
padding: 0;
margin: 0;
}
<body></body>

但我仍然不知道如何使顶面和底面都可见。

最佳答案

body {
background: url('http://web-industry.eu/landing/img/bg.png') no-repeat;
background-size: 100% 100%;
width: 100vw;
height: 100vh;
box-sizing: border-box;
border: #f36d32 3px solid;
padding: 0;
margin: 0;
}
<body></body>

关于html - 带边框的全屏背景图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33169718/

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