代码之家 › 专栏 › 技术社区 › Paul

获取覆盖图像的覆盖问题

css3 css html

Paul · 技术社区 · 7 年前

我不明白为什么我的 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>

3 回复 | 直到 7 年前

VXp Kadir BuÅ¡atliÄ 7 年前

添加 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>

jawahar N 7 年前

在这里我添加了一个示例代码,希望对大家有所帮助。

<!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>

Gerard 7 年前

.overlay 在图像下面。我把黑色透明漆涂在 pseudo-code 班级 .覆盖

.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>