Question

好的，所以我有3张图片，带有带边框的figcaptions在它们的中心。图像设置为.5不透明度，然后悬停时为1.0不透明度。我希望figcaptions和他们的边界始终保持在图像的顶部。现在，figcaptions和他们的边界在图像下面，当我悬停figcaption文本移动在图像前面时，figcaption边框移动到后面。

这是我的HTML：

 <section class="icons">
               <div id="logo-container">
               <figure>
        <img src="/Users/laurenkunz/Desktop/Design Projects/laurenkunz.com/logoicon-01.png" alt="Logo design photo" height="32">
        <figcaption class="logodesigncaption">Logo Design</figcaption>
  </figure></div>
    <div id="invitation-container"><figure>
      <img src="laurenkunz.com/invitationicon-01-01.png" alt="Invitation design photo" width="541">
      <figcaption class="invitationscaption">Invitations</figcaption>
    </figure></div>
      <div id="website-container"><figure>
        <img src="laurenkunz.com/websitesicon-01.png" alt="Website design photo" width="639">
        <figcaption class="websitedesignicon">Website Design</figcaption>
      </figure></div>
      </section>
</div>

这是我的CSS：

#logo-container img{
    width:400px;
    display: inline-block;
    opacity: .5;
    filter: alpha(opacity=50);/*For IE and earlier*/
}

#invitation-container img{
    width: 400px;
    display:inline-block;
    opacity: .5;
    filter: alpha(opacity=50);/*For IE and earlier*/
}

#website-container img{
    width: 400px;
    display:inline-block;
    opacity: .5;
    filter: alpha(opacity=50);/*For IE and earlier*/
}
.icons  img{
    height: 400px;;
    display: inline-block;
    margin: 10px;
}
#logo-container img:hover{
    opacity: 1.0;
    filter: alpha(opacity=100);/*For IE and earlier*/
}
#invitation-container img:hover{
    opacity: 1.0;
    filter: alpha(opacity=100);/*For IE and earlier*/
}
#website-container img:hover{
    opacity: 1.0;
    filter: alpha(opacity=100);/*For IE and earlier*/
}


#logo-container{

    border-style: solid;
}
#invitation-container{

    border-style: solid;

}
#website-container{

    border-style:solid;
}

.icons, #website-container, #logo-container, #invitation-container{

min-width: 500px;
margin: 10px;
display:inline-block;
}

figcaption{
border-style: solid;
font-size: 36px;
display: table-caption;
width: 250px;
padding: 10px 20px 20px;
margin: -220px 100px 100px 75px;
text-align: center;

}

我知道这有点乱，对不起！有人能帮助我吗？

Answer 1

您正在遇到CSS中opacity属性的一个相对未知（通常令人沮丧）的怪癖。 Opacity values than than 1 change the stacking context of the item they're on

如果我理解你的初始陈述，那么下面的CSS应该能解决你的问题：

figcaption {
    position: relative;
    z-index: 2;
}

如果您仍然遇到问题，建立一个示例CodePen或JSFiddle将帮助我们确切地确定问题，并提出更准确的CSS。希望有所帮助！

figcaption显示在img上，但是在悬停时显示在img后面的figcaption边框

1 个答案: