渐变不填满整个区域

时间:2011-08-16 20:57:53

标签: css

我正在试图弄清楚如何调整register.php页面中的css,以便渐变将像登录页面一样填充整个区域。

http://www.kansasoutlawwrestling.com/kowmanager/register

http://www.kansasoutlawwrestling.com/kowmanager/login

3 个答案:

答案 0 :(得分:3)

如果您想对登录和放大使用相同的背景渐变图像注册表单您可以修改CSS规则以将渐变定位在注册框的顶部并应用背景颜色#E7E7E7,以便渐变的底部渐变为纯色。像这样:

.register-style {
  background: #E7E7E7 url("../images/login.jpg") no-repeat scroll center top;
}

或者,您可以创建更高版本的渐变图像,并在.register样式的类中使用它。

答案 1 :(得分:2)

简单的答案是“让渐变图像更高一些”。

或者,您可以使用CSS3渐变。

http://www.colorzilla.com/gradient-editor/将生成适用于“所有浏览器”的跨浏览器CSS。

答案 2 :(得分:1)

如果您想覆盖register.php上的案例,请尝试添加以下样式:

.register-style {
    background-position: top;
}

.register-inside {
    height: 276px;
}

.register-data {
    padding: 20px 10px 20px 30px;
}

这样做你可以将渐变定位到顶部,使块稍微小一些,这样渐变就会适合,使得较轻的盒子的填充物稍微小一点,所以看起来会更好。

此外,如果您可以控制register.php HTML,请将class="text"添加到输入中:他们将获得与登录页面上的输入相同的样式。