0

我一直在从事一个项目，该项目基本上涉及重做整个站点，减去布局，其中一些我必须保留，例如登录页面。

现在，登录页面由两个只是静态图像的框组成。我想用一个动态大小的背景图像替换它们。

两个当前框之一包含此图像作为背景：

在此处输入图像描述

我想要一些与此非常相似的东西，即使可能的话使用渐变。我还想保留边缘处的奇怪阴影效果。

我是开发人员，不是设计师。有人可以帮我吗？CSS 远非我的强项。

根据要求，以下是表格内容：

在此处输入图像描述

提前致谢。

4

2 回答 2

2

这个 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

于 2013-08-06T20:03:20.830 回答
0

Try an inset box-shadow like:

.background {
    -moz-box-shadow: inset 0 0 5px #555555;
    -webkit-box-shadow: inset 0 0 5px #555555;
    box-shadow: inner 0 0 5px #555555;
}

You can use transparency as well like a rgba() if you don't have to support old IE.

于 2013-08-06T19:56:33.727 回答