0

JoomlaでWebサイトを作っています。

私のフロントページには、リンクであるいくつかの画像があります。

これらの画像に、不透明度+緑のようなわずかに緑の効果を加えたいと思っていますが、元の画像は下にあります。

これはcssだけでできますか？

不透明度は機能しますが、緑色は機能しません。

誰かが私を助けてくれることを願っています。

これが私のサイトです。「Referencer」と「Nyheder」の下の小さな画像です

4

2 に答える 2

1

これは CSS で実行できます。主なトリックは、表示タイプがインラインであるため、リンクが現在 img ブロックを囲んでいないことです。

次の HTML を想定します。

<a href="#" class="greenish"><img src="..." /></a>

必要な CSS は次のとおりです。

a.greenish { 
    background: green;
    display: inline-block;
}
a.greenish img { 
    opacity: 0.5;
}

もちろん、緑と不透明度を好みに合わせて調整します。

例として、この素敵な jsfiddleを参照してください。ホバーしたときにのみ緑色に変えたい場合に備えて、これには追加の CSS が含まれていることに注意してください。

于 2012-06-18T18:43:51.483 に答える
0

純粋な CSS でやりたいことを簡単に行うことはできません。CSS には「オーバーレイ」はありません。背景色/不透明度を操作できますが、画像は常にその上にあるため、必要な効果が得られません。

あなたがする必要があるのは、画像をAの背景にしてから、背景を変更して、効果がすでに適用されている同様の画像にすることです. 画像は小さいので、オーバールックのスプライトを同じ画像で簡単に作成できます。会社のウェブサイトの上部にあるソーシャル アイコンでまさにこれを行いました - http://www.bnrbranding.com/

于 2012-05-30T01:34:13.490 に答える