1

ここで私のHTML全体を見ることができます。それをコピーしてデモドキュメントにローカルに貼り付けて、私が何を参照しているのかを確認できます。

http://chopapp.com/#ny9fxmtv

基本的に、右側にグラデーションとカスタム矢印の両方を持つようにボックスのスタイルを設定したいと思います。上の画像に表示されています。

問題は、私が取得しているグラデーションが次のコードを介していることです。

background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#ececec)) ;

これは上記の私のコードの21行目です。ただし、「background」属性はすでにこの行で使用されているため、「url（image.png）」タグを含めて、コードの20行目であるカスタム下矢印画像を指定することもできません。

グラデーションと下向き矢印の画像を作成する方法はありますか？

ありがとう！

4

3 に答える 3

2

このリンクを確認してください

background: #6cab26;
background: url(IMAGE_URL); /* fallback */
background: url(IMAGE_URL), -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */
background: url(IMAGE_URL), -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Saf5.1+ */
background: url(IMAGE_URL),    -moz-linear-gradient(top, #444444, #999999); /* FF3.6+ */
background: url(IMAGE_URL),     -ms-linear-gradient(top, #444444, #999999); /* IE10 */
background: url(IMAGE_URL),      -o-linear-gradient(top, #444444, #999999); /* Opera 11.10+ */
background: url(IMAGE_URL),         linear-gradient(top, #444444, #999999); /* W3C */
于 2012-10-02T13:10:36.850 に答える
1 
<div class="selectParent">
 <select>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>           
 </select>  
 </div>​


.selectParent{
width:80px;
overflow:hidden;
background: #d0e4f7;
background: -moz-linear-gradient(top,  #d0e4f7 0%, #73b1e7 24%, #0a77d5 50%, #539fe1 79%, #87bcea 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d0e4f7), color-stop(24%,#73b1e7), color-stop(50%,#0a77d5), color-stop(79%,#539fe1), color-stop(100%,#87bcea));
background: -webkit-linear-gradient(top,  #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%);
background: -o-linear-gradient(top,  #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%);
background: -ms-linear-gradient(top,  #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%);
background: linear-gradient(to bottom,  #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%);



}

.selectParent select{
width: 100px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 2px 2px 2px 2px;
border: none;
 background: transparent url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat 60px center;


 }

デモ

于 2012-10-02T13:23:08.480 に答える
0

ボックス内のリストを使用できますか

ul.className {list-style-image:url('someimage.gif');}

次に、ボックスの背景を必要に応じて配置します。

2番目のオプションは、divをそのdivの上に配置し、グラデーションのあるdivと矢印のあるdivを配置することです。そんな感じ？

于 2012-10-02T13:06:34.710 に答える