Ширина и высота 100% не работает на всплывающем изображении - PullRequest
Новая
       16

Ширина и высота 100% не работает на всплывающем изображении

0 голосов
/ 16 марта 2020

У меня есть кнопка «Свяжитесь со мной», однако, когда кто-то наводит курсор на кнопку, я хочу, чтобы появился полноэкранный фон изображения. Однако это изображение не на весь экран. 

a {
  text-decoration: none;
  color: white;
  /*Let's Chat colour*/
}

.Oval {
  position: relative;
  font-family: 'Open Sans', sans-serif;
  top: 510px;
  text-align: center;
  font-size: 25px;
  text-color: white;
  left: 30%;
  z-index: 75;
  background-color: orange;
  width: 140px;
  height: auto;
  background: #162129;
  border-radius: 40px;
  padding: 0px;
  text-decoration: none;
}

.Oval:hover {
  position: relative;
}

.Oval:hover:after {
  content: url(Lightning1.JPG);
  display: block;
  position: absolute;
  center: 100%;
  top: -510px;
  opacity: 0.5;
  z-index: -10;
  height: 100%;
  width: 100%;
}
<div class="Oval"><a href="mailto:">Let's Chat</a></div>

Ответы [ 3 ]

0 голосов
/ 16 марта 2020

CSS свойство позиция: абсолютная точная, что:

Позиционируется относительно своего ближайшего предка

  1. Если если вы хотите, чтобы фоновое изображение занимало все пространство экрана, тогда его можно достичь с помощью свойства CSS position: fixed , с помощью которого вы можете расположить его относительно окна просмотра. Затем вы указываете верхнее, нижнее, левое и правое значения для 0, чтобы получить элемент для всех видов.

Например: 

a {
  text-decoration: none;
  color: white;
  /*Let's Chat colour*/
}

.Oval {
  position: relative;
  font-family: 'Open Sans', sans-serif;
  top: 510px;
  text-align: center;
  font-size: 25px;
  text-color: white;
  left: 30%;
  z-index: 75;
  background-color: orange;
  width: 140px;
  height: auto;
  background: #162129;
  border-radius: 40px;
  padding: 0px;
  text-decoration: none;
}

.Oval:hover {
  position: relative;
}

/* Original
.Oval:hover:after {
  content: url(Lightning1.JPG);
  display: block;
  position: absolute;
  center: 100%;
  top: -510px;
  opacity: 0.5;
  z-index: -10;
  height: 100%;
  width: 100%;
}
*/

.Oval:hover::after {

    content: url(https://i.imgur.com/QgfTfOU.jpg);
    display: block;
    position: fixed;
    opacity: 0.5;
    z-index: -10;
    top: 0;
    border: 0;
    left: 0;
    right: 0;

}
<div class="Oval"><a href="mailto:">Let's Chat</a></div>
  1. Если вы хотите использовать фоновое изображение только на div.Oval, то вам следует CSS свойство position:absolute 

a {
  text-decoration: none;
  color: white;
  /*Let's Chat colour*/
}

.Oval {
  position: relative;
  font-family: 'Open Sans', sans-serif;
  top: 510px;
  text-align: center;
  font-size: 25px;
  text-color: white;
  left: 30%;
  z-index: 75;
  background-color: orange;
  width: 140px;
  height: auto;
  background: #162129;
  border-radius: 40px;
  padding: 0px;
  text-decoration: none;
  clip-path: border-box; /* Added */
  overflow: hidden; /* Added */
}

/* Original
.Oval:hover {
  position: relative;
}
*/

/* Original
.Oval:hover:after {
  content: url(Lightning1.JPG);
  display: block;
  position: absolute;
  center: 100%;
  top: -510px;
  opacity: 0.5;
  z-index: -10;
  height: 100%;
  width: 100%;
}
*/

/* Added */
.Oval:hover::after {
  content: '';
  background: url(https://i.imgur.com/QgfTfOU.jpg);
  background-size: auto;
  background-size: cover;
  display: block;
  position: absolute;
  opacity: 0.5;
  z-index: -10;
  top: 0;
  border: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
<div class="Oval"><a href="mailto:">Let's Chat</a></div>
0 голосов
/ 16 марта 2020

Вам нужно добавить свойство pointer-events: none; + z-index: -1; в .Oval:hover:after что-то вроде приведенного ниже фрагмента.

Надеюсь, приведенный ниже фрагмент поможет вам. 

a {
  text-decoration: none;
  color: white;
}
.Oval {
  position: relative;
  font-family: 'Open Sans', sans-serif;
  top: 100px;
  text-align: center;
  font-size: 25px;
  color: white;
  left: 50%;
  margin-left: -70px;
  background-color: orange;
  width: 140px;
  height: auto;
  background: #162129;
  border-radius: 40px;
  padding: 0px;
  text-decoration: none;
}
.Oval:hover:after {
  content:'';
  background: url(https://i.imgur.com/QgfTfOU.jpg);
  background-size: cover;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
  pointer-events: none;
}
<div class="Oval"><a href="mailto:">Let's Chat</a></div>
0 голосов
/ 16 марта 2020 

a {
  text-decoration: none;
  color: white;
  /*Let's Chat colour*/
}

.Oval {
  position: relative;
  font-family: 'Open Sans', sans-serif;
  top: 510px;
  text-align: center;
  font-size: 25px;
  text-color: white;
  left: 30%;
  z-index: 75;
  background-color: orange;
  width: 140px;
  height: auto;
  background: #162129;
  border-radius: 40px;
  padding: 0px;
  text-decoration: none;
}

.Oval:hover {
  position: inherit;
  left:0;
}
.Oval:hover a{display:none;}

.Oval:hover:after {
  content:'';
  background: url(https://i.imgur.com/QgfTfOU.jpg);
  background-size:cover;
  display: block;
  position: absolute;
  center: 100%;
  top:0;
  left:0;
  opacity: 0.5;
  z-index: 1;
  height: 100%;
  width: 100%;
}
<div class="Oval"><a href="mailto:">Let's Chat</a></div>
...