Question

enter image description here

我目前的代码是

.related-posts {
    overflow: hidden;
    margin: 0 0 0px;
}

.related-list li {
    float: left;
    list-style-type: none;
    margin: 0 15px 22px;
    text-align: center;
    width: 300px;
    position:relative;
}

.related-list img {
    background: none repeat scroll 0 0 #f5f5f5;
    border: 2px solid #e5e5e5;
    display: block;
    margin: 0 auto;
    padding: 5px;
}

.relatedtxt { z-index:100;
    position:absolute;    
    color:white;
    background-color:#000000;
    margin-left: 7px;
    margin-right: 7px;
    margin-top:-62px;
    min-height:55px;
    font-size:14px;
    padding-left:5px;
    padding-right:5px;
    padding-top:5px;
}

我的HTML代码是

<ul class="related-list">

<li><a href="http://globaltravelwiki.com/france/nord-pas-de-calais-mining-basin/" rel="bookmark" title="Permanent Link toNord-Pas de Calais Mining Basin"><img width="300" height="210" src="http://globaltravelwiki.com/france/wp-content/uploads/2014/08/Nord-Pas-de-Calais-Mining-Basin-300x210.jpg" class="attachment-related" alt="Nord" /><p class="relatedtxt">Nord-Pas de Calais Mining Basin </p></a></li>

<li><a href="http://globaltravelwiki.com/france/saltworks-of-salins-les-bains/" rel="bookmark" title="Permanent Link toSaltworks of Salins-les-Bains and Arc-et-Senans"><img width="300" height="210" src="http://globaltravelwiki.com/france/wp-content/uploads/2014/08/Saltworks-of-Salins-les-Bains-and-Arc-et-Senans-300x210.jpg" class="attachment-related" alt="Arc-et-Senans" /><p class="relatedtxt">Saltworks of Salins-les-Bains and Arc-et-Senans </p></a></li>

<li><a href="http://globaltravelwiki.com/france/arles-roman-romanesque-monuments/" rel="bookmark" title="Permanent Link toThe City of Arles – Home to Roman and Romanesque Monuments"><img width="300" height="210" src="http://globaltravelwiki.com/france/wp-content/uploads/2014/07/Roman-and-Romanesque-Monuments-300x210.jpg" class="attachment-related" alt="Roman and Romanesque Monuments" /><p class="relatedtxt">The City of Arles – Home to Roman and Romanesque Monuments </p></a></li>

<li><a href="http://globaltravelwiki.com/france/vezelay-church-and-hill/" rel="bookmark" title="Permanent Link toVézelay Church and Hill (1979)"><img width="300" height="210" src="http://globaltravelwiki.com/france/wp-content/uploads/2014/08/Vezelay-300x210.jpg" class="attachment-related" alt="Vezelay" /><p class="relatedtxt">Vézelay Church and Hill (1979) </p></a></li>

</ul>

我目前的示例链接http://globaltravelwiki.com/france/the-loire-valley/

我的代码也无法使用Chrome浏览器。请帮助解决这个CSS设计问题。

Answer 1

首先我认为你应该有一个单独的文本容器而不是使用p标签。

之类的东西

<li>
    <a>
        <img />
        <div class="relatedText">
            <p>your text here</p>
        </div>
    </a>
</li>

.relatedtxt { z-index:100;
position:absolute;    
color:white;
background-color:#000000;
margin-left: 7px;
margin-right: 7px;
margin-top:-62px;
min-height:55px;
font-size:14px;
padding-left:5px;
padding-right:5px;
padding-top:5px;
width:calc(100% - 14px);
opacity:0.5;
}

希望这有帮助

Answer 2

为了简单的步骤，在“relatedtxt”类中添加宽度，并为背景提供不透明度颜色。

.relatedtxt {
z-index:100;
position:absolute;    
color:white;
background-color:#000000;
margin-left: 7px;
margin-right: 7px;
margin-top:-62px;
min-height:55px;
font-size:14px;
padding-left:5px;
padding-right:5px;
padding-top:5px;



width:96.5%;
background-color: rgba(0,0,0,0.3);
}

Answer 3

查看我的代码

<body style="margin: 0px;">
     <img style="-webkit-user-select: none; cursor: -webkit-zoom-out;width: 500px;height: 300px;" src="demo.png" width="1920" height="1080">

     <div class="bg" style="position: absolute;background: black;opacity: 0.5;width: 500px; height: 100px; top: 200px;"></div>
     <span style="position: absolute;top: 220px;left: 50px;color: white;">Hello World</span>       
 </body>

快乐编码

Answer 4

应用透明度 试试这个

 <div class="bg" style="position: absolute;background:transparent;opacity: 0.5;width: 500px; height: 100px; top: 200px;"></div>

该设计需要transparent。

如何用css显示文本覆盖

4 个答案: