Question

我将图像包含在多个父div中，以创建与图像本身相比的轮廓框偏移。每个图像都是指向页面的链接。这就是它的样子：

    <div id="boxes-wrapper">
        <div class="cointainer" id="container1">
            <div class="box-border">
                <div class="image-wrapper">
                    <div class="image-size">
                        <a href="..\pages/centri.html"><img id="img1" src="..\photos/titlepage/batch35.jpg" alt="Centri Sociali di Milano"/>
                        <h5>Centri Sociali di Milano</h5></a>
                </div>
            </div>
        </div>
    </div><!--boxes wrapper-->

我有一个脚本可以减少图像的不透明度，直到一个人被隐藏起来。悬停的图像增加不透明度1，其他图像增加不透明度。在mouseleave上，所有图像都返回到硬编码的不透明度。这部分工作正常 - 只要图像可以悬停！

.image-size div经常掩盖图像。由于其子的不透明度变化，它以某种方式获得更高的z指数。因此，hover事件不会触发img元素，因为它们位于.image-size后面。因此，链接是不可点击的，除非您找到可以单击的图像条。

这是一个工作CodePen的链接。该脚本会影响不透明度，并且仅适用于某些照片的外边缘，因为此z-index分层。

https://codepen.io/WallyNally/pen/PGYVgX

我只需要img来获得最高的z-index，以便它们可以位于顶部。这应该解决所有问题。不幸的是，设置它们的z-index并没有改变任何东西。文档中的所有元素都已定位。我可以将父母的z-index更改为-1，但祖父母优先考虑。您可以继续这样做，直至到达body。将body和html设置为-1后，您就会回到开始的位置。

有人有解决方案吗？我对这一切都很难过。

Answer 1

此解决方案是对Maju先前提供的解决方案的修正。使用此结构，边缘不与图像区域和不透明度堆叠重叠是预期的。

但是，当.border宽度和.border img宽度之间存在差异时，仍有少量保证金延期。此代码是针对这种情况的最佳解决方案，但不是最佳解决方案。如果您有关于如何消除此保证金的建议，请在评论中添加它们。

.wrap包含边框，图片和副标题

.border调整边框大小并保留图像。

<div class='wrap' id='cap1'>
    <div class='border' id='con1'>
        <a href="..\pages/centri.html"><img id="img1" src="https://placekitten.com/275/400"/ alt="Squatting and social housing crisis in London"/></a>
    </div>
    <h5>Centri Sociali di Milano</h5>
</div>

<div class='wrap' id='cap2'>
    <div class='border' id='con2'>
    <div class='img-wrap' id='img2'>
        <a href="https://placekitten.com/750/500"/ alt="Squatting and social housing crisis in London"/></a>
        </div>
    </div><h5>Squatting and Social Housing Crisis in London</h5>
</div>

<div class='wrap' id='cap3'>
    <div class='border' id='con3'>
        <a href="..\pages/anxiety.html"><img id="img3" src="https://placekitten.com/258/200" /></a>
    </div><h5>Anxiety</h5>  
</div>

和CSS

.wrap {
    display: inline-block;
    position: absolute;
}

.border {
    display: inline-block;
    box-shadow:  
        0 0 0 1px #7b0700;
    position: absolute;
    width: 0;
    }

img {
    display: block;
    position: relative;
    }
#cap1 {
    top: 21%;
    left: 7%;
    width: 28%;
}
#con1 {
    padding-top: 6%;
    left: 3%;
    width: 100%;
}
#con1 img {
    margin-bottom: -6%;
    left: -9%;
    width: 100%;
}
#cap1 h5{
    margin-top: 77%;
}
#cap2{
    top: 32%;
    left: 44%;
    width: 22%;
}
#con2 {
    padding-top: 50%;
    left: 0%;
    width: 100%;
}

#con2 img {
    margin-top: -74%;
    left: -12%;
    width: 100%;
}
#cap2 h5 {
    margin-top: 63%;
}
#cap3 {
    top: 6%;
    left: 72%;
    width: 26%;
}
#con3 {
    padding-top: 5%;
    left: 0%;
    width: 72%;
}
#con3 img {
    margin-bottom: -14%;
    left: 4%;
    width: 98%;
}
#cap3 h5{
    left: -29%;
    margin-top: 111%;
}

Z-index + opacity =失败，HTML / CSS

1 个答案: