透明なdivを画像に重ねることができます

この例では、以下の画像をFlashで実行していますが、テキストのある画像の下部に透明なボックスを置いても同様の影響があるのでしょうか？ CSSや他のフラッシュで可能ですか？透明なdivを画像に重ねることができます

http://www.ajaxline.com/files/imgloop.png http://www.ajaxline.com/files/imgloop.png

2009-07-26 JasonDavis

確かに、ここではそうすることのクロスブラウザの方法です：

<html> 
    <head> 
    <style type="text/css"> 
     div.imageSub { position: relative; } 
     div.imageSub img { z-index: 1; } 
     div.imageSub div { 
     position: absolute; 
     left: 15%; 
     right: 15%; 
     bottom: 0; 
     padding: 4px; 
     height: 16px; 
     line-height: 16px; 
     text-align: center; 
     overflow: hidden; 
     } 
     div.imageSub div.blackbg { 
     z-index: 2; 
     background-color: #000; 
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
     filter: alpha(opacity=50); 
     opacity: 0.5; 
     } 
     div.imageSub div.label { 
     z-index: 3; 
     color: white; 
     } 
    </style> 
    </head> 
    <body> 
     <div class="imageSub" style="width: 300px;"> <!-- Put Your Image Width --> 
     <img src="image.jpg" alt="Something" /> 
     <div class="blackbg"></div> 
     <div class="label">Label Goes Here</div> 
     </div> 
    </body> 
</html>

この方法ではJavaScriptを必要としない、IEでのClearTypeテキストを失い、と互換性がありますされませんFirefox、Safari、Opera、IE6,7,8 ...残念ながら、1行のテキストに対してのみ機能します。複数の行が必要な場合は、div.imageSub divのheightとline-heightプロパティを調整するか、次のように変更します（CSSを変更し、ラベルを2回指定する必要があります）。

<html> 
    <head> 
    <style type="text/css"> 
     div.imageSub { position: relative; } 
     div.imageSub img { z-index: 1; } 
     div.imageSub div { 
     position: absolute; 
     left: 15%; 
     right: 15%; 
     bottom: 0; 
     padding: 4px; 
     } 
     div.imageSub div.blackbg { 
     z-index: 2; 
     color: #000; 
     background-color: #000; 
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
     filter: alpha(opacity=50); 
     opacity: 0.5; 
     } 
     div.imageSub div.label { 
     z-index: 3; 
     color: white; 
     } 
    </style> 
    </head> 
    <body> 
     <div class="imageSub" style="width: 300px;"> <!-- Put Your Image Width --> 
     <img src="image.jpg" alt="Something" /> 
     <div class="blackbg">Label Goes Here</div> 
     <div class="label">Label Goes Here</div> 
     </div> 
    </body> 
</html>

出典

2009-07-26 03:25:47

これはそんなにありがとう素晴らしいです！ – JasonDavis

YSlow firefox pluginを実行しているときに悪用されると言われているものの1つにCSS Expressionsがありますが、これは正しいとは言えません。 – JasonDavis

** @ jasondavis：** 'filter'と' -ms-filter'はその1つですが、IEの選択肢はありません。 ** YSlow **は法律ではないことを覚えておいてください。 –

間違いなく。

<div style="background-image: url(image.png);" > 

    <div style="position:relative; top:20px; left:20px;"> 
    Some text here 
    </div> 
</div>

出典

2009-07-26 03:13:19

<html> 
    <body> 
     <div style="position: absolute; border: solid 1px red"> 
      <img src="http://www.ajaxline.com/files/imgloop.png"/> 
      <div style="position: absolute; top:0px; left:40%; width:20%; height: 10%; background-color: gray; opacity: .80; -moz-opacity: 0.80; filter:alpha(opacity=80);"/> 
      <div style="position: absolute; top:0px; left:40%; width:20%; height: 10%; color: white;"> 
       Hello 
      </div> 
     </div> 
    </body> 
</html>

出典

2009-07-26 03:40:14 drs9222

透明なdivを画像に重ねることができます

答えて

関連する問題