将透明上层添加到包含文本的div

Question

我在div中有一个文本我想在此div上添加一个透明图像。

点击图片后div的内容显示div更改宽度以显示带滚动条的整个文本。请任何人都有这个解决方案。

在此先感谢。

这是文字的div代码具有400像素：

<div class="about-style"> 
         <h2 class="about-header">About</h2><br><br> 
         <p class="about-text-style"> 
          London, England’s capital, 
          set on the River Thames, is a 21st-century city with history stretching back to Roman times. At its centre stand the imposing Houses of Parliament, the iconic ‘Big Ben’ clock tower and Westminster Abbey, site of British monarch coronations. 
          Across the Thames, the London Eye observation wheel provides panoramic views of the South Bank cultural complex, and the entire city. times. At its centre stand the imposing Houses of Parliament, the iconic ‘Big Ben’ clock tower and Westminster Abbey, site of British monarch coronations. 
          Across the Thames, the London Eye observation wheel provides panoramic views of the South Bank cultural com<br> 
          <span class="more-text-class"> > more </span> 
         </p> 

        </div> 

Answer 1

尝试使用此代码，它可以帮助你

$(".about-style img").click(function(){ 
 
\t $(this).hide(); 
 
\t $("div.about-style").addClass("DivWithScroll");; 
 
});

.about-style img{ 
 
    position : absolute; 
 
    top : 0; 
 
} 
 

 
.DivWithScroll{ 
 
    height:150px; 
 
    overflow:scroll; 
 
    overflow-x:hidden; 
 
    padding : 10px; 
 
    border : 1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<div class="about-style"> 
 
    <h2 class="about-header">About</h2> 
 
    <p class="about-text-style"> 
 
    London, England’s capital, set on the River Thames, is a 21st-century city with history stretching back to Roman times. At its centre stand the imposing Houses of Parliament, the iconic ‘Big Ben’ clock tower and Westminster Abbey, site of British monarch coronations. 
 
    Across the Thames, the London Eye observation wheel provides panoramic views of the South Bank cultural complex, and the entire city. times. At its centre stand the imposing Houses of Parliament, the iconic ‘Big Ben’ clock tower and Westminster Abbey, site of British monarch coronations. 
 
    Across the Thames, the London Eye observation wheel provides panoramic views of the South Bank cultural com 
 
    <span class="more-text-class"> <i class="fa fa-arrow-right"></i> more </span> 
 
    </p> 
 
    <img src="http://bluemarlinpools.com/wp-content/themes/twentytwelve/images/pool-background.png" width="100%" height="210px"/> 
 
</div>