Question

我需要一些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问题）并检查了几个试图解决此问题的网页。看起来图像比窗口大，所以我想保持图像中心，但可以调整到窗口大小，没有滚动条。

谢谢！

Answer 1

如果您只想禁用滚动条：

body {
    overflow: hidden; 
}

注意这是<body>标记，而不是.body类。

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

关于你的标记，你已经有了一些有趣的事情。我不确定.grad的目的是什么。另外，将样式应用于<body>而不是试图将<div class="body">绝对置于一堆东西之后会不会更简单吗？

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

所以看起来更像是：

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

Answer 2

尝试以下：

http://jsfiddle.net/pratyush141/mkzkqdv0/

.body{
width:100%;
overflow: hidden;
position: absolute;
top: -20px;
left: -20px;
right: -40px;
bottom: -40px;
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;   
background-image: url(http://www.meezan.tv/themes/default/member_images/example_background.png);
-webkit-filter: blur(5px);
z-index: 0;
}

比窗口更大的背景图像

2 个答案: