Question

我有代码，我需要在其中创建三个图像，文本跨度。问题是，我不能为每个图像设置相对于每个图像的“顶部”值（例如，所有图像都是150px高，因此每个跨度的“顶部”值将是130px，而不是130,290等等。 ..）我的HTML代码：

<div class="obrazekvmenu" style="float:left; margin-bottom:10px; left:-2px;">
<a href="#">
<img class="obrazekvmenu" src="https://asset.msi.com/global/picture/image/feature/multimeda/mouse/DS300/ds300Banner.jpg" style="display:inline-block; width:440px; height:185px;"/></a>
<span class="photoh20"><h2 class="entry-title" style="margin-top: 8px; margin-bottom: 8px; margin-left: 16px;"><a class="photoa" href="#" rel="bookmark">MSI</a></h2></span>
</div>
<div class="obrazekvmenu" style="float:left; margin-bottom:10px; left:-2px;">
<a href="#">
<img class="obrazekvmenu" src="https://asset.msi.com/global/picture/image/feature/multimeda/mouse/DS300/ds300Banner.jpg" style="display:inline-block; width:440px; height:185px;"/></a>
<span class="photoh21"><h2 class="entry-title" style="margin-top: 8px; margin-bottom: 8px; margin-left: 16px;"><a class="photoa" href="#" rel="bookmark">MSI</a></h2></span>
</div>

我的CSS：

.obrazekvmenu:hover > .photoh20{
  background: -webkit-linear-gradient(top,rgba(255,255,255,1),rgba(51,52,51,1));
}
.obrazekvmenu:hover > .photoh21{
  background: -webkit-linear-gradient(top,rgba(255,255,255,1),rgba(51,52,51,1));
}
span.photoh20{
text-shadow: 2px 2px black;
}
span.photoh21{
text-shadow: 2px 2px black;
}
.sidebarimage{
top:-3px;
}
span.photoh20 {
    position: absolute;
    left: 0;
top:147px;
background: -webkit-linear-gradient(top,rgba(255,255,255,0.7),rgba(51,52,51,.7));
    width: 103.338%;
}
.obrazekvmenu{
width:310px;
height:185px;
}
span.photoh21 {
    position: absolute;
    left: 0;
top:147px;
background: -webkit-linear-gradient(top,rgba(255,255,255,0.7),rgba(51,52,51,.7));
    width: 103.338%;
}

JS小提琴链接：https://jsfiddle.net/g1zn2nm6/3/

Answer 1

试试这个

<div class="obrazekvmenu" style="float:left; margin-bottom:50px; left:-2px;">
<a href="#">
 <img class="obrazekvmenu" src="https://asset.msi.com/global/picture/image/feature/multimeda/mouse/DS300/ds300Banner.jpg" style="display:inline-block; width:440px; height:185px;" />
</a>
<span class="photoh20"><h2 class="entry-title" style="margin-top: 8px; margin-bottom: 8px; margin-left: 16px;">
 <a class="photoa" href="#" rel="bookmark">MSI</a></h2>
</span>
</div>
<div class="obrazekvmenu" style="float:left; margin-bottom:10px;    left:-2px;">
<a href="#">
 <img class="obrazekvmenu" src="https://asset.msi.com/global/picture/image/feature/multimeda/mouse/DS300/ds300Banner.jpg" style="display:inline-block; width:440px; height:185px;" />
</a>
<span class="photoh21"><h2 class="entry-title" style="margin-top: 8px; margin-bottom: 8px; margin-left: 16px;">
<a class="photoa" href="#" rel="bookmark">MSI</a></h2>
</span>
</div>

和你的css

.obrazekvmenu:hover > .photoh20 {
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1), rgba(51,    52, 51, 1));
 }
.obrazekvmenu{display:block}
.obrazekvmenu:hover > .photoh21 {
 background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1), rgba(51, 52, 51, 1));
 }

 span.photoh20 {
 text-shadow: 2px 2px black;
 }

 span.photoh21 {
 text-shadow: 2px 2px black;
 }

 .sidebarimage {
  top: -3px;
  }

  span.photoh20 {  
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.7), rgba(51, 52, 51, .7));
  width: 103.338%;
  }

 .obrazekvmenu {
  width: 310px;
  height: 185px;
  }

  span.photoh21 { 
   background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.7), rgba(51, 52, 51, .7));
   width: 103.338%;
  }

我希望这可以帮助您解决问题

如何使跨度捕捉到div的底部（多个div）

1 个答案: