logo标签列表

当滚动条出现时，HTML背景图片会改变大小。

htmlcssbackground-image
3

我在我的网站的所有页面上使用这张背景图片：

body {
    background-image:url('...');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

这在单个页面上完美运作。但是，当在有和没有垂直滚动条的页面之间切换时，页面宽度会改变，这会导致背景图像略微改变大小以相应地进行缩放。
这种小的过渡是不愉快的，我想避免它。有什么方法可以让背景图像“忽略”滚动条占用的空间吗？
这是标准浏览器的问题，它会添加滚动条并减小屏幕宽度，因此会出现跳动。一些现代浏览器，如Mac上的Chrome等，有一个隐藏的滚动条可以防止这种情况发生，但对于其他浏览器，我想没有什么办法了。 - Simon Davies
1
你可以添加 overflow: scroll; 并始终显示滚动条，怎么样？ - Patrick
2个回答
1
我遇到了相同的问题，并尽全力通过纯CSS解决它。每个解决方案都以某种方式失败了。最终，我决定创建一个小的JavaScript片段，利用100vw和100vh单位来消除在具有或不具有垂直滚动条的页面之间切换时背景跳动的问题。
如果您使用background-size: 100vw 100vh，则背景图像将无法保持其纵横比。然而，如果您使用background-size: 100vw auto或background-size: auto 100vh，则图像将保持其纵横比，但根据图像和屏幕大小可能并不总是填充整个屏幕。
此脚本将cover更改为100vw auto或auto 100vh中的一个，具体取决于哪一个会填充整个屏幕。该脚本非常轻量级，因为它在页面加载时执行一次，然后每次调整窗口大小时再次执行。 

// Function to change background size "cover" to
// either "100vw auto" (100 percent of viewport
// width and automatic height)
// or "auto 100vh" (automatic width and 100
// percent of viewport height).
fixBackgroundSizeCover = function(event) {

  var bgImageWidth = 3639,
    bgImageHeight = 2255,
    bgImageRatio = bgImageWidth / bgImageHeight,
    windowSizeRatio = window.innerWidth / window.innerHeight;

  if (bgImageRatio > windowSizeRatio) {
    document.body.style.backgroundSize = 'auto 100vh';
  } else {
    document.body.style.backgroundSize = '100vw auto';
  }
};

// Execute the fix function once upon load
fixBackgroundSizeCover();

// Execute the fix function everytime on window resize
window.addEventListener('resize', fixBackgroundSizeCover);

// A test button to toggle body vertical scrollbar on and off
document.getElementById('toggle-body-vertical-scrollbar-btn').addEventListener('click', function(event) {
    if(document.body.classList.contains('force-scrollbar')) {
      document.body.classList.remove('force-scrollbar');
    } else {
      document.body.classList.add('force-scrollbar');
    }
});
body {
  background-image: url("https://unsplash.com/photos/Fr9WHTRMY5A/download");
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

/* The following is related to the toggle body vertical scrollbar button */
body.force-scrollbar {
  min-height: 2000px;
}

#toggle-body-vertical-scrollbar-btn {
  position: fixed;
  top: 10px;
  left: 10px;
  padding: 10px;
  background: rgba(255,255,255,.7);
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 2px rgba(0,0,0,.2);
  color: #222;
  font-family: sans-serif;
  cursor: pointer;
}

#toggle-body-vertical-scrollbar-btn:hover {
  background: rgba(245,245,245,.85);
  box-shadow: 0 1px 1px rgba(0,0,0,.2);
}
<button id="toggle-body-vertical-scrollbar-btn">
    Toggle body vertical scrollbar
</button>

代码片段已经硬编码了背景图片的宽度和高度，因为图片大小是预先知道的。如果您加载动态背景图像，则需要以某种方式计算背景图像的宽高比。

https://jsfiddle.net/perttumyry/0csjk8yo/

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接