0

私はこれを行うための最も簡単で最も保守しやすい方法を探しています：

ここに画像の説明を入力してください

これらは、サイト全体の特定の画像に追加されるテキストスラッグです。彼らは皆これと同じことを言っていますが、画像はさまざまで、CMSからのものです。

相対位置に設定された画像と、絶対位置に配置された子divに「より良い方法があります」というdivを使用してそれを行う方法を知っています。

ただし、この処理を受けるすべての画像にHTMLを追加する必要があるため、：before疑似要素を使用してcssクラスでこれを行う方法を探していました。これまでのところ、クラスをラッピングリンクに適用しても効果はありません。

<a href="#" class="tabw"><img src="imagepath" alt=""></a>

.tabw img:before {
content: 'theres a better way';
color: red;
font-size: 18px;
}

このようなことは可能ですか？CSSにすべてを含めるということは、必要に応じてCMSにクラス属性を適用させるだけでよいということです。

4

3 に答える 3

0

私はjQueryでこのようにします：

HTML

<div class="thumb">
    <img src="http://www.zupmage.eu/up/NvBtxn7LHl.png" alt="cover"/>
    <div class="caption">My caption</div>
</div>

Css

.thumb {
    position:relative;
    width:230px;
    height:230px;
}

.thumb img {
    max-width:100%;
}

.thumb .caption {
    display:none;
    position:absolute;
    top:0;
    height:20px;
    line-height:20px;
    width:100%;
    text-align:center;
    background:rgba(255,255,255,0.5);
}

JQuery

$('.thumb').hover(function() {
    $(this).find('.caption').fadeIn();
}, function() {
    $(this).find('.caption').hide();
});

フィドルを見る

于 2013-02-09T15:50:20.350 に答える
0

ええ、::beforeそして::after画像には取り組みません。ただし、それらをラッパーリンクに適用できます。

a{
  position: relative;
}

a, a > img{
  display:inline-block;
}

a::before{
  content: 'theres a better way';
  position: absolute;    
  left: 0;
  top: 0;     
  width: 80%;
  height: 20px;
  left: 10%;  
  background: #000;
  opacity: 0.4;      
  color: red;
  font-size: 18px;
}

デモ

HTMLにテキストを追加する場合は、リンクに実際の要素を追加する必要があります（同じルールを適用しますが、適用しませんcontent） 。

于 2013-02-09T15:58:48.620 に答える
0

このスレッドを見つけた人への注意： Firefox21およびIE9/10では、これは特大の画像では正しく機能しませんでした。グローバルにmax-width：100％に設定されている場合でも、画像は強制的に100％になります。

上で選択した答えに従う必要がありましたが、修正するdisplay:block代わりにAタグをに設定しました。display:inline-block

于 2013-05-15T19:56:56.603 に答える