html - 如何在图像上添加半透明框并右对齐？

Question

我想在图像上添加一个半透明的文本框，该框需要右对齐，但不知道该怎么做，有人可以帮忙吗？

我在这里模拟了页面:http://dev.gigiscucina.co.uk/ ，截图如下。红色 block 只是占位符。

HTML 如下。我希望能够在 home_widget_2(文本右对齐)和主页 home_widget_4(文本左对齐)上添加半透明文本 block 。

<div id="home_widget_1" class="grid col-300">
    <div id="text-2" class="widget-wrapper widget_text">            
        <div class="textwidget"><img src="http://dev.gigiscucina.co.uk/wp-content/uploads/2014/10/300.jpg" alt= ""></div>
    </div>
</div><!-- end of .col-300 -->

<div id="home_widget_2" class="grid col-620 fit">
    <div id="text-3" class="widget-wrapper widget_text">            
        <div class="textwidget"><img src="http://dev.gigiscucina.co.uk/wp-content/uploads/2014/10/620.jpg" alt= ""></div>
    </div>
</div><!-- end of .col-620 fit -->

<div id="home_widget_3" class="grid col-620">
    <div id="text-4" class="widget-wrapper widget_text">            
        <div class="textwidget"><img src="http://dev.gigiscucina.co.uk/wp-content/uploads/2014/10/620.jpg" alt= ""></div>
    </div>
</div><!-- end of .col-620 -->

<div id="home_widget_4" class="grid col-300 fit">
    <div id="text-5" class="widget-wrapper widget_text">            
        <div class="textwidget"><img src="http://dev.gigiscucina.co.uk/wp-content/uploads/2014/10/300.jpg" alt= ""></div>
    </div>
</div><!-- end of .col-300 fit -->

Answer 1

.box { 
   position: relative; 
   width:300px;
}

.box p { 
   position: absolute; 
   bottom: 0; 
   right: 0; 
   background-color:rgba(0,0,0,0.75);
   color:#ffffff;
   padding:5px;
}

<div class="box">
    <img src="image.png" width="300" alt="" />
    <p>this is where your text will go<br />change image size according to div width</p>
</div>