photos_html/css_WEB-ITnose にテキスト説明を追加する CSS 実装-htmlチュートリアル-php.cn

photos_html/css_WEB-ITnose にテキスト説明を追加する CSS 実装

WBOY

リリース： 2016-06-24 11:30:37

オリジナル

3460 人が閲覧しました

画像にテキストの説明を追加する CSS 実装:
一部の画像効果では、画像にテキストの説明が表示されます。この効果を実現する方法を紹介するコード例を次に示します。
コード例は次のとおりです。

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.thediv{  width:400px;  height:200px;  position:relative;}img{  width:400px;  height:200px;}.thediv span{  width:400px;  height:50px;  display:block;  text-align:center;  line-height:50px;  background-color:#333;  filter:alpha(opacity=50);    -moz-opacity:0.5;    opacity:0.5;  position:absolute;  top:100px;  color:red;}</style></head><body><div class="thediv">  <img src="mytest/demo/tree.jpg"/>  <span>蚂蚁部落欢迎您</span></div></body></html>

ログイン後にコピー

上記のコードは、画像上にテキストの説明と半透明の効果を実現します。実装原理は非常に単純です。つまり、最も外側の div を相対位置指定を使用するように設定し、次に、span 要素を絶対位置に設定して、最も外側の div を位置決め参照オブジェクトとして使用できるようにしてから、top 属性を設定します。価値。ただし、背景が透明なだけでなくテキストも透明なので、上記のコードは次のとおりです。

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.thediv{  width:400px;  height:200px;  position:relative;}img{  width:400px;  height:200px;}.thediv span{  width:400px;  height:50px;  display:block;  text-align:center;  line-height:50px;  position:absolute;  top:100px;}.content{  background-color:#333;  filter:alpha(opacity=50);    -moz-opacity:0.5;    opacity:0.5;}.text{  color:red;  z-index:100;}</style></head><body><div class="thediv">  <img src="mytest/demo/tree.jpg"/>  <span class="content"></span>  <span class="text">蚂蚁部落欢迎您</span></div></body></html>

ログイン後にコピー

上記のコードは要件を満たしています。背景は透明ですが、テキストは不透明です。上記のコードで文字が透明になっているのは、透明属性が継承されているためで、子要素も透明効果を持つことになります。このように、文字を格納したspan要素を半透明のspan要素に重ねることができます。ポジショニング。

元のアドレスは次のとおりです: http://www.softwhy.com/forum.php?mod=viewthread&tid=12679

詳細については、以下を参照してください: http://www.softwhy.com/divcss/