提问者:小点点

背景图像被删除,或者添加了滚动条


我使用以下代码将背景图像设置为我的 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/这也不起作用。

有人可以帮我设置背景图像而不添加滚动条或切断图像吗?我已经尝试了这里和其他网站提供的所有解决方案,但似乎没有任何效果。


共2个答案

匿名用户

包含

包含将保持长宽比并垂直或水平地适合屏幕。它不会裁剪图像,但因此不会填充整个背景,除非长宽比完全相同。

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;
}