Ошибка получения наложения на изображение - PullRequest
Новая
       32

Ошибка получения наложения на изображение

0 голосов
/ 27 сентября 2018

Я не могу понять, почему мой класс 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 ]

0 голосов
/ 27 сентября 2018

Здесь я добавил пример кода, надеюсь, это поможет. 

<!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>
0 голосов
/ 27 сентября 2018

Фон .overlay был под изображением.Я применил черную прозрачность к псевдокоду класса .overlay.

.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>
0 голосов
/ 27 сентября 2018

Добавьте 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...