html - 比窗口大的背景图片

标签 html css

我需要一些 CSS 方面的帮助。正如你在这里看到的https://jsfiddle.net/88eb92ed/滚动条已启用。我想隐藏它们。我以前从未使用过CSS,我使用的是模板,这就是我不知道如何更改它的原因。我想禁用滚动条。我真的不知道什么更容易:更改背景图像大小或禁用滚动条。一些代码:

.body {
  overflow: hidden;
  position: absolute;
  top: -20px;
  left: -20px;
  right: -40px;
  bottom: -40px;
  width: auto;
  height: auto;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat; 
  background-image: url({{ url_for('static',filename='images/parisbackground.jpg') }});
  -webkit-filter: blur(5px);
  z-index: 0;
}  

我尝试使用 overflow: hidden(来自 this SO 问题)并检查了几个试图解决此问题的网页。看起来图像比窗口大,所以我想保持图像居中,但可以调整到窗口大小,没有滚动条。

谢谢!

最佳答案

如果你只想禁用滚动条:

body {
    overflow: hidden; 
}

注意 那是在<body>标记而不是 .body类。

如果您想强制元素适合它们的父容器,您将需要重构它们相对于彼此的定位方式。

您在标记方面发生了一些有趣的事情。我不确定 .grad 的目的是什么是。此外,将样式应用于 <body> 不是更简单吗?而不是试图绝对定位 <div class="body">在一堆东西后面?

如果您坚持使用 .body ,您不需要为定位定义所有四个维度。您只需为 X 或 Y 定位一个位置。

所以它看起来更像是:

position: absolute;
top: 0;
left: 0;

关于html - 比窗口大的背景图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31417217/

相关文章:

html - 向左浮动子导航

html - 导航栏对齐部分右侧部分左侧错误

HTML5 离线 JSON 不起作用

javascript - 从图像点击发送高度和宽度到 fancybox

css - Rspec + capybara : check existence of tag with it's css class

html - 如何去除gojs示例 "productionProcess"中的浅蓝框?

html - Footer Div,3 列,带有图像和文本

html - 如何使背景颜色不与边框重叠?

css - Spry 验证文本字段在谷歌浏览器中显示不佳

html - 如何更改下拉框背景以及 HTML 和 CSS 中的箭头?