如何用CSS創建動態大小的表單背景？

我一直在研究一個項目，主要涉及重做整個站點，減去佈局，其中一些我必須攜帶，如登錄頁面。如何用CSS創建動態大小的表單背景？

現在，登錄頁面由兩個只是靜態圖像的框組成。我想用一個動態大小的背景圖像替換它們。

一兩個電流盒包含此圖片爲背景：

enter image description here

我想非常類似這樣的東西，即使有梯度如果可能的話。我也想保持所有邊緣的怪異陰影效果。

我是一名開發人員，而不是設計師。有人能幫我在這裏嗎？ CSS遠沒有我的特長。

按要求，這裏有形式內容：

enter image description here

在此先感謝。

來源

2013-08-06 Kehlan

HTTP：// WWW。 colorzilla.com/gradient-editor/ –

這個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-06 20:03:20

我喜歡這個，但有什麼辦法讓它的大小，而不是指定的寬度和高度的內容？ – Kehlan

@keyCrumbs如果您希望實際使用百分比來實現它，那麼身高和體重保持不變。你可以展示一個樣本...我可以爲你做鍛鍊嗎？ –

我添加了表單內容的屏幕截圖。謝謝！ – Kehlan

嘗試插圖的box-shadow，如：

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

您可以使用透明度，以及像RGBA（）如果你沒有支持老IE。

來源

2013-08-06 19:56:33

事實上，我認爲最後一行是愚蠢的。 –

如何用CSS創建動態大小的表單背景？

回答

相關問題