CSSホバリングで動的に幅の背景画像

Question

私のウェブサイトのナビゲーションにマウスオーバーエフェクトを作成しようとしています。 ナビゲーションは、いくつかの項目がある横棒です。それのためのコード。

<ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">About us</a></li> 
    <li><a href="#">Our work and portfolio</a></li> 
    <li><a href="#">Contact</a></li> 
</ul> 

これは無地の背景色を有し、すべての<li>間アイテムを分離する境界です。あなたが見ることができるように、すべての<li>はその内容のために異なる幅を持ち、ホバーのための私のイメージは以下の通りですが、私はホバーの背景イメージを与えたいと思います。

だから、実際には左右にちょうど黒い影です。右の影は、<li>の絶対右側に配置し、左の影を絶対左に配置する必要があります。

これを達成する方法はありますか？それがjQueryなどのものであれば問題ありません。

ありがとうございます。

Answer 1

影と可変長効果が必要な場合。その後、画像を3つの部分に分割します。その後、以下のCSSスニペット

li a:hover:before { content: url("image/leftshadow.jpg"); } 
li a:hover { background-Image: url("image/center.jpg"); } 
li a:hover:after { content: url("image/rightshadow.jpg"); } 

を使用して、この

1. 左シャドウ
2. センターパート
3. 右シャドウ

ような何かにあなたのマークアップを更新あなたの画像のように見える

Answer 2

linear gradientですので、お試しいただけます

background-image: linear-gradient(to right, #111, #333, #111); 

古いブラウザのサポートを追加することができます。