2

私がやろうとしているのは、スクロールバーのない放射状の画像を背景に全画面表示することです。今のところ、それは一種の作品です。つまり、ラジアル グラデーション (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>
4

1 に答える 1

1

bodyここでの問題は、DOM ツリーの最後のノードが要素であることを考慮していないことです。

ウィンドウのサイズを変更すると、本体はその子がそれ自体よりも大きいことを認識し、スクロールバーを表示します。

これを CSS に追加してみてください。

body {
  overflow: hidden;
}
于 2012-12-01T21:49:45.490 に答える