Question

我无法弄清楚为什么我的overlay类没有在图像顶部生成不透明覆盖层。使用开发人员工具查看时，打开覆盖框似乎只覆盖底部的5％（恰好在“解决方案”一词上方），但是该链接在图像上的任何位置都有效。

有人看到我的覆盖物为什么不能覆盖整个图像吗？

.machInfo25 {
	display: inline-block;
	vertical-align: top;
	height: 30vh;
	position: relative;
	box-sizing: border-box;
}
.overlay {
	position: relative;
	height: 100%;
	width: 100%;
	background-color: rgba(0,0,0,.5);
	border: none;
  z-index: 3;
}
.machInfo25 {
	width: 25%;
}
.machInfo25 img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
a .machineInfoTitle {
	color: #FFF;
}
.total-center {
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
}

<div class="machInfo25">
  <a class="overlay" href="solutions">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqXxLsqFCFPx0l_3_h5sn-0JN2oU5GU-wGnHH3CbJLSMeywV6CLA" alt="View all">
    <div class="total-center">
      <span class="machInfoTitle">Solutions</span>
    </div>
  </a>
</div>

Answer 1

将display: block;或display: inline-block添加到叠加层类中。 <a>元素是内联元素，其大小与块元素不同。该链接仍在整个图片上起作用，因为该图片是该链接的子元素

.machInfo25 {
	display: inline-block;
	vertical-align: top;
	height: 30vh;
	position: relative;
	box-sizing: border-box;
}

.overlay {
  display: block;
  position: relative;
  height: 100%;
  width: 100%;
  background-color: rgba(0,0,0,.5);
  border: none;
  /*z-index: 3;*/
}

.machInfo25 {
	width: 25%;
}

.machInfo25 img {
  position: relative;
  z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

a .machineInfoTitle {
	color: #FFF;
}

.total-center {
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
}

<div class="machInfo25">
  <a class="overlay" href="solutions">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqXxLsqFCFPx0l_3_h5sn-0JN2oU5GU-wGnHH3CbJLSMeywV6CLA" alt="View all">
    <div class="total-center">
      <span class="machInfoTitle">Solutions</span>
    </div>
  </a>
</div>

Answer 2

在这里我添加了示例代码，希望，这会有所帮助。

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            .container {
              position: relative;
              width: 50%;
            }

            .image {
              display: block;
              width: 100%;
              height: auto;
            }

            .overlay {
              position: absolute;
              top: 0;
              bottom: 0;
              left: 0;
              right: 0;
              height: 100%;
              width: 100%;
              opacity: 0;
              transition: .5s ease;
              background-color: rgba(0,0,0,.5);
            }

            .container:hover .overlay {
              opacity: 1;
            }

            .text {
              color: white;
              font-size: 20px;
              position: absolute;
              top: 50%;
              left: 50%;
              -webkit-transform: translate(-50%, -50%);
              -ms-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
              text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqXxLsqFCFPx0l_3_h5sn-0JN2oU5GU-wGnHH3CbJLSMeywV6CLA" alt="View all" class="image">
            <div class="overlay">
                <div class="text">Solutions</div>
            </div>
        </div>
    </body>
</html>

Answer 3

.overlay的背景在图像下方。我将黑色透明度应用于类.overlay的{{3}}。

.machInfo25 {
  height: 30vh;
  width: 25%;
}

.overlay {
  position: relative;
  display: block;
}

.overlay:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgb(0, 0, 0, 0.3);
  width: 100%;
  height: 100%;
}

.machInfo25 img {
  width: 100%;
}

a .machInfoTitle {
  color: white;
}

.total-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

<div class="machInfo25">
  <a class="overlay" href="solutions">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqXxLsqFCFPx0l_3_h5sn-0JN2oU5GU-wGnHH3CbJLSMeywV6CLA" alt="View all">
    <div class="total-center">
      <span class="machInfoTitle">Solutions</span>
    </div>
  </a>
</div>

发布覆盖图像的问题

3 个答案: