Question

我有两幅图像彼此叠放（一个绝对定位），因此我可以将鼠标悬停在一个图像上以查看另一个图像。我还想放置一个“文本框”（一个带有彩色背景的div，可以容纳一些简单的文本），该文本框跨越顶部图像的下半部分的1/4，但是，我在尝试定位时遇到了一些问题表示文本框，表示其下方的图像已经完全定位。

我在下面附加了一个示例代码笔，并附有我理想的图像。有没有使用HTML / CSS做到这一点的简单方法？

Codepen

<img src="img1.foo" class="img1" />
<img src="img2.foo" class="img2" />
<div class="textBar">Text bar here?</div>

Example image

Answer 1

https://codepen.io/anon/pen/rKEEKb

要添加到“标签”类的CSS：

.tag {
  position: absolute;
  z-index: 3; /*place above the images */
  bottom: 0; /* put it at the bottom */
  padding: 20px; 
  width: 100%;
  background: lightblue;
  box-sizing: border-box; /* allow for padding to be included in width */
}

您也可以使用css :hover，而无需使用jquery 伪类https://developer.mozilla.org/en-US/docs/Web/CSS/:hover：

img.front:hover {
  opacity: 0;
}

将div元素放置在绝对定位的图像上

1 个答案: