Question

我的图片下面有一个文本框。我缩放了图像，它越过文本框，我不希望文本框位于图像的顶部，但它不适用于z-index。

HTML：

android:clickable="true"

CSS：

<a href="#">
  <img src="http://images.meredith.com/content/dam/bhg/Images/2009/07/101422234.jpg.rendition.200sq.jpg" />
  <div class="text">
    This is some text.
  </div>
</a>

Answer 1

使用z-index

尝试position:absolute;

.text { text-align:center; height:200px; margin-top:-4px; background-color:white; transition:all 1s ease; position:absolute; bottom:0px; z-index:99; }

＆＃13;

a {
  height:400px;
  width:200px;
  display:block;
  text-decoration:none;
  color:black;
  overflow:hidden;
  position:relative;
}

img {
 // transform: scale(1.1);
}

a:hover .text {
  color:white;
  background-color:black;
}

.text {
  text-align:center;
  height:200px;
  margin-top:-4px;
  background-color:white;
  transition:all 1s ease;
  position:absolute;
  bottom:0px;
  z-index:99;
}

＆＃13;

<a href="#">
  <img src="http://images.meredith.com/content/dam/bhg/Images/2009/07/101422234.jpg.rendition.200sq.jpg" />
  <div class="text">
    This is some text.
  </div>
</a>

＆＃13;

Answer 2

您在transform上使用img，transform开始新的堆叠上下文。将position: relative添加到.text以在该元素上开始新的堆叠上下文，使其显示在img

的顶部

a {
  height: 400px;
  width: 200px;
  display: block;
  text-decoration: none;
  color: black;
  overflow: hidden;
}

img {
  transform: scale(1.1);
}

a:hover .text {
  color: white;
  background-color: black;
}

.text {
  text-align: center;
  height: 200px;
  margin-top: -4px;
  background-color: white;
  transition: all 1s ease;
  position: relative;
}

<a href="#">
  <img src="http://images.meredith.com/content/dam/bhg/Images/2009/07/101422234.jpg.rendition.200sq.jpg" />
  <div class="text">
    This is some text.
  </div>
</a>

Answer 3

使用这个：

<html>
<head>
<style>
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
opacity:.5
}
</style>
</head>
<body>

<h1>This is a heading</h1>

<img src="http://images.meredith.com/content/dam/bhg/Images/2009/07/101422234.jpg.rendition.200sq.jpg" width="500" height="140">

因为图像的z-index为-1，所以它将放在文本后面。

Answer 4

我认为这就是你所追求的：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  width: 400px;
  height: 400px;
}

.container img {
  position: absolute;
  top: 0;
  left: 0;
}

.container div {
  color: white;
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  opacity: 0;
  transition: all .5s ease;
  width: inherit;
  height: inherit;
  text-align: center;
}

.container:hover div {
  opacity: 1;
}
.container div span {
  font-size: 30px;
  line-height: 30px;
  position: relative;
  top: calc(50% - 15px);
  transform: translateY(-50%);
}

<div class="container">
  <img src="http://placehold.it/400" />
  <div>
    <span>Image text</span>
  </div>
</div>

z-index在图像和文本框之间不起作用

4 个答案: