ホームページ > 記事 > ウェブフロントエンド > photos_html/css_WEB-ITnose にテキスト説明を追加する CSS 実装
photos_html/css_WEB-ITnose にテキスト説明を追加する CSS 実装
- WBOYオリジナル
- 2016-06-24 11:30:373374ブラウズ
画像にテキストの説明を追加する 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/
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。