Question

我一直致力于一个基本上重做整个网站的项目，减去布局，其中一些我不得不随身携带，例如登录页面。

现在，登录页面包含两个仅为静态图像的框。我想用一个动态大小的背景图片替换它们。

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

enter image description here

我想要一些非常相似的东西，即使有可能的渐变。我还想保持奇怪的阴影效果，这些效果都在边缘。

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

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

enter image description here

提前致谢。

Answer 1

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

Answer 2

尝试插入阴影，例如：

.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（）一样使用透明度。

如何使用CSS创建动态大小的表单背景？

2 个答案: