Question

我要做的是拥有一个全屏幕背景，上面有一个径向图像，没有滚动条。现在它有点工作。我的意思是带有径向渐变（img）的div即使有overflow：hidden也会添加一个滚动条。

html { 
background: url(background.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover
}


#glow{
width:1043px;
height:763px;
position:absolute;
left:50%;
top:50%;
background-image: url('outer_glow.png');
margin-left:-543px; /* Negative half the width*/
margin-top:-381px; /* Negative half the height */
overflow: hidden;
}

我想要做的是如果图像径向太大而不能将其切断并居中。但目前它仍然在我的浏览器中显示一个垂直条。下面的HTML

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="styleit.css" rel="stylesheet">
<title>Title</title>
</head>
<body>
<div id="glow"></div>
</body>
</html>

Answer 1

这里的问题是你没有考虑到DOM树中的最后一个节点是body元素。

当你调整窗口大小时，身体看到它的孩子比自己大，所以它会显示滚动条。

尝试将此添加到您的CSS：

body {
  overflow: hidden;
}

Div添加滚动条甚至溢出：隐藏

1 个答案: