Css轉換漸變到純色

我目前在創建從漸變到純色的轉換時相當不成功。此外，由於我的漸變，我似乎無法看到我的背景圖像對齊到右側。Css轉換漸變到純色

這裏是我的代碼：

input { 
    width: 306px; 
    height:27px; 
    font-size:12px; 
    font-family: Arial,Helvetica,sans-serif; 
    padding: 1px 30px 1px 9px; 
    color: #767676; 
    font-weight: normal; 
    margin: 3px 0; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
    border:1px solid #e5e5e5; 
    background-image:url('http://i.imgur.com/9hdsg.png'); 
    background-position:right; 
    background-repeat:no-repeat; 

    -moz-transition-property: width, background-color; 
    -webkit-transition-property: width, background-color; 
    -o-transition-property: width, background-color; 
    transition-property: width, background-color; 

    -moz-transition-duration: 0.5s, 0.5s; 
    -webkit-transition-duration: 0.5s, 0.5s; 
    -o-transition-duration: 0.5s, 0.5s; 
    transition-duration: 0.5s, 0.5s; 




    background: #787878; /* Old browsers */ 
/* IE9 SVG, needs conditional override of 'filter' to 'none' */ 
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzc4Nzg3OCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzc4Nzg3OCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzY4Njg2OCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3OTc5NzkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 
background: -moz-linear-gradient(top, #787878 0%, #787878 50%, #686868 51%, #797979 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#787878), color-stop(50%,#787878), color-stop(51%,#686868), color-stop(100%,#797979)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #787878 0%,#787878 50%,#686868 51%,#797979 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #787878 0%,#787878 50%,#686868 51%,#797979 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #787878 0%,#787878 50%,#686868 51%,#797979 100%); /* IE10+ */ 
background: linear-gradient(top, #787878 0%,#787878 50%,#686868 51%,#797979 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#787878', endColorstr='#797979',GradientType=0); /* IE6-8 */ 


    } 



input:focus { 
    width: 535px; 
    background-color:#ffffff; 
}

下面是一個例子： http://jsfiddle.net/8neF9/2/

謝謝大家:)

來源

2011-11-25 pufAmuf

多重背景的工作，你需要聲明他們一行： background: url(path/to/image), linear-gradient(...) - 首先是最接近其他人。
動畫梯度純色，使梯度的兩倍高（或長）作爲元件，所以不是50％使用25％的等

背景位置也宣佈爲在一行中，同樣適用於重複。你的情況：

background-size: 27px 29px, 100% 200%; // first image, then gradient twice as high 
background-repeat: no-repeat, repeat; // don't repeat image, repeat gradient

動畫漸變純色 - 使用過渡到改變從後臺位置：background-position: 0 50%, 0 0;到background-position:0 50%, 0 100%;

我已經upadted your fiddle，但沒有試圖使它適用於ie過濾器或舊的webkit語法。

來源

2011-11-25 20:34:34 Litek

太好了！另外，由於我們改變了背景位置，我怎樣才能將圖像對齊？ – pufAmuf

只需將背景位置更改爲'100％50％，0 100％'。 – Litek

謝謝Litek，這個技巧:)） – pufAmuf

Css轉換漸變到純色

回答

相關問題