帶半透明背景的滑動門技術？

我正在做一個有光澤外觀的按鈕。按鈕可以有各種顏色和大小。這是我迄今爲止所做的：帶半透明背景的滑動門技術？

.btn-zen-inverse, .btn-zen-inverse:hover{ 
    color: white; 
    background: 
    url("../img/btn_right.png") no-repeat right 0, 
    url("../img/btn_left.png") no-repeat left 0, 
    url("../img/btn_center.png") repeat-x 42px 0; 
    background-color: #273032; 
    background-size: contain; 
    line-height: 50px; 
    margin: 12px 18px 3px 0; 
    padding: 0; 
    border: 2px solid white !important; 
}

引用的圖像是透明的alpha。這個想法是根據background-color屬性設置顏色。圖像還有其他一些屬性，但這些只是estetic。

這個看起來像這樣的圖像！我希望中心圖像僅在圖像的中心部分可見。正如你可以從我的CSS看到的。這隻能在最新版本的4大瀏覽器中正確運行。

enter image description here

這是我想它是什麼樣子：

enter image description here

一個suggesion與背景梯度做到這一點。如果可能的話，我需要按照填充/邊距工作方式來定義背景位置。那可能嗎？

設計包含： 2邊界：一個白色一個漸變色，甲背景漸變。和頂部1px厚的垂直梯度。

來源

2012-10-09 Himmators

請格式化代碼 – RomanTheGreat

無論如何，因爲我看到的設計。這可以使用CSS3屬性作爲線性漸變，盒子陰影等 – RomanTheGreat

我的壞...更新問題與設計上的deatils ... – Himmators

這與我只能用CSS獲得的距離更近。

請注意，多個背景不被IE8支持。下面的代碼也不是，但至少你不需要圖像。

button preview

Live demo

HTML：

<a class="button dark" href="#"><span>Prova Zenconomy Gratis</span></a>

CSS：

.button { 
    display:inline-block; 
    border:2px solid; 
    -webkit-border-radius:5px; 
    -moz-border-radius:5px; 
    border-radius:5px; 
    line-height:40px; 
    text-decoration:none; 
    font-family:Helvetica,Arial,sans-serif; 
    -webkit-box-shadow: 0 0 4px 1px rgba(204, 204, 204, 0.7); 
    -moz-box-shadow: 0 0 4px 1px rgba(204, 204, 204, 0.7); 
    box-shadow: 0 0 4px 1px rgba(204, 204, 204, 0.7); 
} 
.button > span { 
    padding:0 40px; 
    display:block; 
    border:3px solid; 
    -webkit-border-radius:5px; 
    -moz-border-radius:5px; 
    border-radius:5px; 
} 
.button.dark { 
    border-color:#FFF; 
    color:#FFF; 
    background:#030303; 
} 
.button.dark > span { 
    border-color:#000; 
    -webkit-box-shadow: inset 0 3px 5px -1px rgba(255,255,255,0.3); 
    -moz-box-shadow: inset 0 3px 5px -1px rgba(255,255,255,0.3); 
    box-shadow: inset 0 3px 5px -1px rgba(255,255,255,0.3); 
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjMiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); 
    background: -moz-linear-gradient(top, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.3)), color-stop(100%,rgba(255,255,255,0))); 
    background: -webkit-linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%); 
    background: -o-linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%); 
    background: -ms-linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%); 
    background: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%); 
}

有2類（.button用於佈局和.dark對於顏色和梯度），使得ÿ你的頁面中可以有不同類型的按鈕。

來源

2012-10-09 09:42:25 Giona

這真是太棒了！我很想看看svg，有沒有辦法在基於矢量的程序中打開它？ – Himmators

是@KristofferNolgren，轉到[Microsoft SVG Gradient Background Maker]（http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html）並點擊「Click to paste existing CSS base64-URL background-圖片標記「:-) – Giona

表示已成功解析，但沒有任何事發生 – Himmators

請將check this code作爲您查詢的解決方案。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 

<style type="text/css"> 
    .btn-zen-inverse, .btn-zen-inverse:hover{ 
    color:#fff; 
    background: 
    url("https://lh4.googleusercontent.com/-V_jjGSjquMg/UHPqq7_FfvI/AAAAAAAAA6s/fK5QEHGzC9I/s128/left.png") no-repeat right 0, 
    url("https://lh4.googleusercontent.com/-V_jjGSjquMg/UHPqq7_FfvI/AAAAAAAAA6s/fK5QEHGzC9I/s128/left.png") no-repeat left 0, 
    url("https://lh3.googleusercontent.com/-JgxTtVru7R8/UHPqq1RgAII/AAAAAAAAA6o/gmfFayABGfQ/s128/center.png") repeat-x 42px 0; 
    background-color: #ff09f9; 
    background-size: contain; 
    line-height: 50px; 
    margin: 12px 18px 3px 0; 
    padding: 0; 
    border: 2px solid white !important; 
    text-align:center 
} 

</style> 

</head> 

<body> 
<div class="btn-zen-inverse">Content</div> 
</body> 
</html>

來源

2012-10-09 09:21:17 AppMobiGurmeet

這一個有同樣的問題，中心部分覆蓋左側和右側部分變得更深（因爲α層複合） – Himmators

帶半透明背景的滑動門技術？

回答

相關問題