Question

我在大约一年前设计的Shopify网站（http://originalchuck.com/）上工作了这个效果，然后今晚，我不知道，客户决定购买一个新主题，打开它现在其中一个我的CSS技巧不再适用。如果你转到两篇博客文章下面的三张图片，你就会看到问题所在。翻转它们，图像不透明度会发生变化。这是个好消息。坏吗？跨度中的某些文本也应该出现在每个图像的死点中，但现在它不再存在。我的代码与上一个主题相同，为什么它不再有效？这是我的CSS：

span.text-content, span.text-content-bags {
     color: #ffffff;
     font-size: 30px;
     left: 0px;
     opacity: 0;
     position: absolute;
     text-transform: uppercase;
     top: 0px;
     width: 100%;
}

span.text-content span, div.homepage-bags span.text-content-bags span {
     left: 0px;
     margin-top: -12px;
     position: relative;
     text-align: center;
     top: 50%;
     width: 100%;
}
.homepage-products a:hover span.text-content, .homepage-bags a:hover span.text-content-bags {
    opacity: 1;
    display: inline-block;
}

Answer 1

这里有一个很酷的技巧，可以将容器放在容器中：

在包含外部的元素上设置position: relative，然后在要居中的元素上设置，请执行以下操作：

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
display: block;
text-align: center;

您还需要为内部元素设置高度和宽度。这些单位不重要。

适用于所有浏览器，包括至少IE8 +。它甚至可能比这更进一步。

在悬停时浮动文本在图像上的CSS问题

1 个答案: