我使用以下代码将背景图像设置为我的 HTML:
body {
margin: 0;
background: url('images/lightning.jpg') no-repeat center center fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
但是图像并没有完全显示在屏幕上,所以我尝试了以下解决方案:https://jsfiddle.net/507w9yoa/这也不起作用。
有人可以帮我设置背景图像而不添加滚动条或切断图像吗?我已经尝试了这里和其他网站提供的所有解决方案,但似乎没有任何效果。
包含
包含
将保持长宽比并垂直或水平地适合屏幕。它不会裁剪图像,但因此不会填充整个背景,除非长宽比完全相同。
body {
margin: 0;
background: url('https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg') no-repeat center center fixed;
background-size: contain;
}
试试这个:我刚刚在背景尺寸中使用了两个不同的单位,现在图像可以在屏幕尺寸中工作,图像不会被裁剪并充满屏幕。我尝试了不同的屏幕,效果很好。
body {
background: url('https://i.postimg.cc/1tcWpbZY/pexels-plato-terentev-5822191.jpg');
background-repeat: no-repeat;
background-size: 100% 100vh;
}