在基础图像上叠加文本

Question

您好，我有以下基础代码笔：

代码：

$(document).ready(function () {
    $(document).foundation();
});

body {
  background-color: #a3d5d3;
}

#wrap {
    position:relative; /* make this relative to have the inner div absolute without     breaking out */
/*    width: 200px;  /* fix the width or else it'll be the entire page's width */
    background: silver; 
    border: 1px solid grey
}

#text {
        color:#ffffff;
        margin-left: 70%;
    position: absolute; 
        width:250px;
        height:60%;
    top: 0; 
    bottom: 0; 
    background: black; 
    opacity:0.5;
        padding :20px;
}

<div class="row fullWidth">
        <div class="large-12 columns">
            <div id="wrap">
                                        <div id="text">
                                            <br /><br /><br /><br />
                                            <h3>MCA Coding and MLC Compliance</h3>
                                            <p>
                                              This is some text which I need to show  on the  right hand side. This is some text which I need to show  on the  right hand side. This is some text which I need to show  on the  right hand side. This is some text which I need to show  on the  right hand side.  

                                            </p>
                                        </div>
<img src="https://www.burgessyachts.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/0/0/00006250_13.jpg" />
            </div>
        </div>
</div>

在大屏幕上它工作正常 -- 我希望文字在图像上过度播放到右边 - 但如果你缩小屏幕，文字开始从右边消失 -- 任何人有任何想法如何在所有屏幕上保持一致？？？谢谢

Answer 1

最好使用 left: position 而不是 margin 来定位。您可能还想删除高度属性以容纳更多内容。

#text {
   padding-top: 2em; /*replaces the <br>s in your html*/
   color: #ffffff;
   position: absolute;
   width: 250px;
  /*height: 60%;*/
  top: 0;
  right:7.5%; /* instead of margin*/
  background: black;
  opacity: 0.5;
  padding: 20px;
}

我做了一个代码笔演示： https://codepen.io/kemie/pen/pPoqOv

在基础图像上叠加文本

overlay text over a image in foundation

zurb-foundation