Question

我有以下HTML和CSS：

/*.fullrecent{
  position: relative;
}*/
.recentimage {
  position: relative;
  float: left;
  width: 50%;
  height: 500px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}
.whitebox {
  background-color: white;
}

<div class="fullrecent">
  <div class="recentconcert">
    <img class="recentimage" src="https://i.scdn.co/image/8b0172dd313c66872cfd01288cffec136b3e13b2">
    <div class="whitebox">Hello World!</div>
  </div>
  <div class="recentconcert">
    <img class="recentimage" src="https://i.scdn.co/image/8b0172dd313c66872cfd01288cffec136b3e13b2">
    <div class="whitebox">Hello World!</div>
  </div>
  <div class="recentconcert">
    <img class="recentimage" src="https://i.scdn.co/image/8b0172dd313c66872cfd01288cffec136b3e13b2">
    <div class="whitebox">Hello World!</div>
  </div>
  <div class="recentconcert">
    <img class="recentimage" src="https://i.scdn.co/image/8b0172dd313c66872cfd01288cffec136b3e13b2">
    <div class="whitebox">Hello World!</div>
  </div>
</div>

我的目标是创建一个带有这些图像的2x2矩阵，我能够做到这一点，但当我尝试添加一个额外的功能时，它被破坏了，这个功能是添加一个白色矩形，从左端重叠每个图像到每个图像底部的右端。有谁知道怎么做？

Answer 1

如果我理解你是正确的话。关键是如果要将文本框与图像重叠，请将文本框设置为绝对位置。

http://jsfiddle.net/592cxncn/

＆＃13;

.fullrecent {
    overflow: auto;
}
.recentconcert {
    float: left;
    width: 50%;
    position: relative;
    text-align: center;
}
.recentimage {
    width: 100%;
    height: auto;
    vertical-align: top;
}
.whitebox {
    /* background: white; */
    background: rgba(255,255,255, .75);
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
}

＆＃13;

<div class="fullrecent">
    <div class="recentconcert">
        <img class="recentimage" src="//dummyimage.com/500/333"/>
        <div class="whitebox">Hello World!</div>
    </div>
    <div class="recentconcert">
        <img class="recentimage" src="//dummyimage.com/500/666"/>
        <div class="whitebox">Hello World!</div>
    </div>
    <div class="recentconcert">
        <img class="recentimage" src="//dummyimage.com/500/999"/>
        <div class="whitebox">Hello World!</div>
    </div>
    <div class="recentconcert">
        <img class="recentimage" src="//dummyimage.com/500/ccc"/>
        <div class="whitebox">Hello World!</div>
    </div>
</div>

＆＃13;

Answer 2

您可以使用JLayeredPane重叠图片上的文字。

将您的CSS更新为：

position:absolute

Fiddle

Answer 3

<html>
<style>
html, body{
  height: 100%;
  width: 100%;
} 
*{
  margin:0;
  padding:0;
} 
/*.fullrecent{
  position: relative;
}*/
.recentconcert{
  display: inline-block;
  position: relative;
  height : 500px;
  width: 49.99%;
}
.recentimage{
  height: 100%;
  width: 100%;
  background-position: 50% 50%;
  background-repeat:   no-repeat;
  background-size:     cover;
  
  
}   
.whitebox{
  position: absolute;
  bottom: 0;
  left: 0;
  width : 100%;
  height : 10px;
  background-color: white;
}
</style>

<body>
<div class="fullrecent">
  <div class="recentconcert">
  <img class="recentimage" src="https://i.scdn.co/image/8b0172dd313c66872cfd01288cffec136b3e13b2">
    <div class="whitebox">
    Hello World!
    </div>
  </div>
  

  <div class="recentconcert">
    <img class="recentimage" src="https://i.scdn.co/image/8b0172dd313c66872cfd01288cffec136b3e13b2">
    <div class="whitebox">
    Hello World!
    </div>
  </div>
  

  <div class="recentconcert">
    <img class="recentimage" src="https://i.scdn.co/image/8b0172dd313c66872cfd01288cffec136b3e13b2">
    <div class="whitebox">
    Hello World!
    </div>
  </div>
  

  <div class="recentconcert">
    <img class="recentimage" src="https://i.scdn.co/image/8b0172dd313c66872cfd01288cffec136b3e13b2">
    <div class="whitebox">
    Hello World!
    </div>
  </div>
  </div>
</div>


</body>
</html>

Answer 4

我并不是100％确切地知道你的意思......但是fiddle呢？那是你的意思吗？

我没有使用img元素，而是将divs background-image属性设置为图像url（避免在这种情况下使用position：absolute）。我还使用rgba（）使白色背景半透明。

CSS：

Xml::Parser::new

Answer 5

这是你想要的结果：

＆＃13;

<html>
<style>
/*.fullrecent{
  position: relative;
}*/
.recentconcert{
  position: relative;
  float: left;
  width:  50%;
  background-position: 50% 50%;
  background-repeat:   no-repeat;
  background-size:     cover;
  
  
}   
.whitebox{
  background-color: white;
}
.recentimage{
 width: 100%;
 }

</style>

<body>
<div class="fullrecent">
  <div class="recentconcert">
  <img class="recentimage" src="https://i.scdn.co/image/8b0172dd313c66872cfd01288cffec136b3e13b2">
    <div class="whitebox">
    Hello World!
    </div>
  </div>
  

  <div class="recentconcert">
    <img class="recentimage" src="https://i.scdn.co/image/8b0172dd313c66872cfd01288cffec136b3e13b2">
    <div class="whitebox">
    Hello World!
    </div>
  </div>
  

  <div class="recentconcert">
    <img class="recentimage" src="https://i.scdn.co/image/8b0172dd313c66872cfd01288cffec136b3e13b2">
    <div class="whitebox">
    Hello World!
    </div>
  </div>
  

  <div class="recentconcert">
    <img class="recentimage" src="https://i.scdn.co/image/8b0172dd313c66872cfd01288cffec136b3e13b2">
    <div class="whitebox">
    Hello World!
    </div>
  </div>
  </div>
</div>


</body>
</html>

＆＃13;

Answer 6

您可以通过以下代码

来执行此操作

<html>
<style>
.recentconcert
{
margin:3px;
float: left;
width:  48%;
height: 500px;
background-image:url('https://i.scdn.co/image/8b0172dd313c66872cfd01288cffec136b3e13b2');
background-repeat:   no-repeat;
background-size:     cover;
position:relative;
border:2px solid black;
}   
.whitebox
{
height:40px;
width:100%;
bottom:0px;
position:absolute;
text-align:center;
background-color: white;
}
</style>

   <body>
<div class="fullrecent">
<div class="recentconcert">
<div class="whitebox">
Hello World!
</div>
</div>


<div class="recentconcert">
<div class="whitebox">
Hello World!
</div>
</div>


<div class="recentconcert">
<div class="whitebox">
 Hello World!
 </div>
 </div>


<div class="recentconcert">
<div class="whitebox">
Hello World!
</div>
</div>
</div>


</body>
</html>

如何使文本框与图像重叠？

6 个答案: