我一直在从事一个项目，该项目基本上涉及重做整个网站，减去布局，其中一些我必须保留，例如登录页面。
现在，登录页面由两个只是静态图像的框组成。我想用一张动态大小的背景图片替换它们。
两个当前框之一包含此图像作为背景：
我想要一些与此非常相似的东西，即使可能的话也可以使用渐变。我还想保留边缘处的奇怪阴影效果。
我是开发人员，而不是设计师。有人可以帮我吗？ CSS 远非我的强项。
根据要求，表格内容如下：
提前致谢。
【问题讨论】：
标签： html css image background
这个 CSS 会做得很好。我已经处理了所有的浏览器：-
#mainLogin {
margin: 5px;
}
.align-left {
float: left;
}
.align-right {
float: right;
}
.login {
width: auto;
height: auto;
border-radius: 2px 2px 2px 2px;
float: left;
-webkit-box-shadow: 2px 2px 2px 2px rgba(1, 2, 2, 1);
box-shadow: 2px 2px 2px 2px rgba(1, 2, 2, 1);
background: -moz-linear-gradient(top, #e1ffff 0%, #e1ffff 7%, #e1ffff 12%, #fdffff 12%, #e6f8fd 30%, #c8eefb 54%, #bee4f8 75%, #b1d8f5 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e1ffff), color-stop(7%,#e1ffff), color-stop(12%,#e1ffff), color-stop(12%,#fdffff), color-stop(30%,#e6f8fd), color-stop(54%,#c8eefb), color-stop(75%,#bee4f8), color-stop(100%,#b1d8f5));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%);
/* IE10+ */
background: linear-gradient(to bottom, #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1ffff', endColorstr='#b1d8f5',GradientType=0 );
/* IE6-8 */
background: #e1ffff;
/* Old browsers */;
}
/*CSS For Button*/
.myButton {
-moz-box-shadow: inset 0px 1px 0px 0px #ffe0b5;
-webkit-box-shadow: inset 0px 1px 0px 0px #ffe0b5;
box-shadow: inset 0px 1px 0px 0px #ffe0b5;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fbb450), color-stop(1, #f89306));
background: -moz-linear-gradient(top, #fbb450 5%, #f89306 100%);
background: -webkit-linear-gradient(top, #fbb450 5%, #f89306 100%);
background: -o-linear-gradient(top, #fbb450 5%, #f89306 100%);
background: -ms-linear-gradient(top, #fbb450 5%, #f89306 100%);
background: linear-gradient(to bottom, #fbb450 5%, #f89306 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89306',GradientType=0);
background-color: #fbb450;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
border: 1px solid #c97e1c;
display: inline-block;
color: #ffffff;
font-family: Trebuchet MS;
font-size: 11px;
font-weight: bold;
padding: 2px 11px;
text-decoration: none;
text-shadow: 0px 1px 0px #8f7f24;
}
.myButton:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f89306), color-stop(1, #fbb450));
background: -moz-linear-gradient(top, #f89306 5%, #fbb450 100%);
background: -webkit-linear-gradient(top, #f89306 5%, #fbb450 100%);
background: -o-linear-gradient(top, #f89306 5%, #fbb450 100%);
background: -ms-linear-gradient(top, #f89306 5%, #fbb450 100%);
background: linear-gradient(to bottom, #f89306 5%, #fbb450 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f89306', endColorstr='#fbb450',GradientType=0);
background-color: #f89306;
}
.myButton:active {
position: relative;
top: 1px;
}
HTML如下：-
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="login"></div>
</body>
</html>
你也可以看看 JSBin http://jsbin.com/inegum/9/edit
【讨论】：
尝试插入框阴影，例如：
.background {
-moz-box-shadow: inset 0 0 5px #555555;
-webkit-box-shadow: inset 0 0 5px #555555;
box-shadow: inner 0 0 5px #555555;
}
如果您不必支持旧的 IE，您也可以像 rgba() 一样使用透明度。
【讨论】：