个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
<html>
<head>
<style type="text/css">
*{padding:0;margin:0;}
body{
background: -webkit-gradient(
linear,
right bottom,
left top,
color-stop(0.25, #F5A432),
color-stop(0.63, #F0F050)
);
background: -moz-linear-gradient(
right bottom,
#F5A432 25%,
#F0F050 63%
);
}
.box{margin-left: 33px; width:100px; height: 100px; background-color:rgb(69,69,69); border: 1px solid rgb(56,56,56);border-radius: 25px; float:left}
#container{padding-left: 37%; padding-right: 30%; width: 1000px; background-color: rgb(64,64,64); position:fixed}
</style>
</head>
<body>
<div id="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</body>
</html>
上面的代码中没有显示渐变!只是一个普通的白色背景。为什么？
最佳答案
body 中的唯一元素 (#container) 具有 position: fixed。
position: fixed 的元素从正常流中移除，因此 body 没有高度。
您可以通过以下方式“修复”此问题:
html {
height: 100%
}
body {
min-height: 100%
}
关于html - CSS 3 渐变不适用于 chrome/firefox，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6526429/
25
4
0
我是一名优秀的程序员,十分优秀！