文字結束和圖像

Question

任何人都有想法如何在桌面上的圖像上顯示文字和圖像上的文字div在手機上？

此代碼顯示文本-div下小圖片解析。

.image-container { 
 
    position:relative; 
 
    width:100%; 
 
    height:100%; 
 
    } 
 

 
.image-container img { 
 
width: 100%; 
 
vertical-align: top; 
 
} 
 

 
.image-container:after { 
 
    content: '\A'; 
 
    position: absolute; 
 
    width: 100%; height:100%; 
 
    top:0; left:0; 
 
    background:rgba(0,0,0,0.3); 
 
    opacity: 1; 
 
    transition: all 1s; 
 
-webkit-transition: all 1s; 
 
    } 
 

 
    .text-after { 
 
    width:100%; 
 
    height:auto; 
 
    color:#000; 
 
    position:absolute; 
 
    top: 50%; 
 
    left: 30%; 
 
    } 
 

 

 

 

 
    @media screen and (max-width: 980px) { 
 
    .text-after { 
 
    position:relative; 
 
    width:100%; 
 
    height:auto; 
 
    color:#000; 
 
    }

<div class="image-container"> 
 
<img src="images/family.jpg" alt="family"> 
 

 
</div> 
 
<div class="text-after"> 
 
<p class="family-header">Lorem ipsum dolor sit ametin orci risus est</p> 
 
<p class="family-content">Lorem ipsum dolor sit amet, in orci risus est</p> 
 
    <p class="family-content">Lorem ipsum dolor sit amet, in</p> 
 
</div>

Answer 1

嗯，我想你問如何在圖像
把圖像中包裝DIV的背景圖像會更容易顯示文本，但在這種情況下我將圖像看作內容，因此屬於HTML。我們將使用該包裝div作爲絕對定位的容器。

CSS添加

.image { 
 
    position: relative; 
 
    width: 100%; 
 
    /* for IE 6 */ 
 
} 
 

 
h2 { 
 
    position: absolute; 
 
    top: 200px; 
 
    left: 0; 
 
    width: 100%; 
 
} 
 

 
h2 span { 
 
    color: white; 
 
    font: bold 24px/45px Helvetica, Sans-Serif; 
 
    letter-spacing: -1px; 
 
    background: rgb(0, 0, 0); 
 
    /* fallback color */ 
 
    background: rgba(0, 0, 0, 0.7); 
 
    padding: 10px; 
 
}

<div class="image"> 
 

 
    <img src="http://www.webclasses.in/wp-content/uploads/2015/08/HTML.jpg " alt="" /> 
 

 
    <h2><span>This is just Test <br />A Message</span></h2> 
 

 
</div>

您可以自定義文字的字體，大小，其他性能相對於你的要求。