Mic*_*Obi 5 css background background-image viewport viewport-units
所以我尝试用 100vh 在封面上设置图像 - 但我有非常具体的情况。
在我的图像中,我有一个大盘子和平板电脑“躺在”这个盘子上。
我的目标是使该图像的标题为 100vh,但有一个问题 - 当我尝试在我的大显示器上测试它时,它看起来不错,但在高度较小的显示器上,它看起来很糟糕 - 我需要这款平板电脑在所有桌面上 100% 可见设备。
检查我的“整页”选项,看看我在说什么。
我还尝试在没有平板电脑的情况下制作此图像封面,然后尝试使用平板电脑和 放置另一张图像position:absolute,但我的第二张图像并不总是位于与该板在框架内的完全相同的位置。
有可能实现我的愿望吗?
.cover {
position: relative;
height: calc(100vh - 80px);
background-size: cover;
background-position: bottom;
background-repeat: no-repeat;
background-image: url(https://s4.postimg.org/uwxudv17x/cover.png);
}Run Code Online (Sandbox Code Playgroud)
<body>
<div class="cover">
</div>
</body>Run Code Online (Sandbox Code Playgroud)