Невозможно заставить изображение заполнить фон и сохранить соотношение сторон при наведении ссылки - PullRequest
Новая
       71

Невозможно заставить изображение заполнить фон и сохранить соотношение сторон при наведении ссылки

0 голосов
/ 30 мая 2018

Я пытаюсь изменить изображение на заднем плане, чтобы заполнить экран и закрыть исходное фоновое изображение при наведении ссылки.До сих пор я получал только три результата:

  1. Link1: Изображение ограничено элементом списка (но, похоже, соотношение сторон сохраняется).
  2. Link2: Изображение сохраняет соотношение, но не заполняет экран.
  3. Link3: Изображение заполняет экран, но растягивается.

Я также пытаюсь наложить линейный градиент на каждое изображение для моего идеального эффекта, но, похоже, он не работает, поскольку изображения не являются фоновыми изображениями.Любая помощь будет принята с благодарностью. 

@import url('https://fonts.googleapis.com/css?family=Montserrat:bold');
body {
  padding: 0;
  background-image: url("https://images.pexels.com/photos/261899/pexels-photo-261899.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

section {
  width: 100%;
}

h1 {
  font-family: 'Heebo', sans-serif;
  font-size: 500%;
  text-transform: uppercase;
  color: #ffffff;
}

h2 {
  font-family: 'Heebo', sans-serif;
  text-transform: uppercase;
  color: #ffffff;
}

p {
  font-family: 'Merriweather', serif;
  font-size: 150%;
  color: #ffffff;
}

ul {
  width: 100%;
  margin: 0;
  margin-left: 1em;
  padding: 0;
}

ul li {
  list-style: none;
  width: 25%;
}

section img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  transition: 1.5s;
  opacity: 0;
}

ul li a:hover+img {
  opacity: 1;
}

a:link {
  font-size: 1000%;
  font-family: 'Heebo', sans-serif;
  color: #ffffff;
  text-decoration: none;
}

a.link1:hover {
  text-shadow: -5px 0 sienna, 0 5px salmon, 5px 0 salmon, 0 -5px salmon;
  background-image: url(https://images.pexels.com/photos/947785/pexels-photo-947785.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: auto;
}


}
a.link2:hover {
  text-shadow: -5px 0 teal, 0 5px moccasin, 5px 0 moccasin, 0 -5px moccasin;
}
a.link3:hover {
  text-shadow: -5px 0 navy, 0 5px coral, 5px 0 coral, 0 -5px coral;
}
.special {
  display: inline;
  text-shadow: -4px 0 teal, 0 4px teal, 4px 0 salmon, 0 -4px salmon;
}
<!DOCTYPE HTML>
<html lang="en">

<head>
  <title>TEST</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- CSS -->
  <link href="style.css" rel="stylesheet" type="text/css">

  <!-- IMPORTED FONTS -->
  <link href="https://fonts.googleapis.com/css?family=Heebo:800" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
</head>

<body>

  <div class="container">
    <br><br>
    <h1>Hi! I'm
      <div class="special">Angelina.</div>
    </h1>

    <h2>Get to know me as a</h2>
    <section>
      <ul>
        <li><a class="link1" href="student.html">Student</a></li>

        <li><a class="link2" href="maker.html">Maker</a><img src="https://images.pexels.com/photos/1110357/pexels-photo-1110357.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" style='height: 100%; width: 100%; object-fit: contain'></li>

        <li><a class="link3" href="volunteer.html">Volunteer</a><img src="https://images.pexels.com/photos/4839/nature-river-waterfall.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"></li>
      </ul>
    </section>
  </div>

</body>

</html>

Ответы [ 3 ]

0 голосов
/ 30 мая 2018

Пожалуйста, попробуйте этот код:

У меня есть небольшие изменения HTML и CSS-код. 

@import url('https://fonts.googleapis.com/css?family=Montserrat:bold');
body {
  padding: 0;
  margin: 0;
  background-image: url("https://images.pexels.com/photos/261899/pexels-photo-261899.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
}
.container {
	position: relative;
	overflow: hidden;
	min-height: 100vh;
}
section { width: 100%; }
h1 {
  font-family: 'Heebo', sans-serif;
  font-size: 500%;
  text-transform: uppercase;
  color: #ffffff;
}

h2 {
  font-family: 'Heebo', sans-serif;
  text-transform: uppercase;
  color: #ffffff;
}

p {
  font-family: 'Merriweather', serif;
  font-size: 150%;
  color: #ffffff;
}

ul {
  width: 100%;
  margin: 0;
  margin-left: 1em;
  padding: 0;
}

ul li {
  list-style: none;
  width: 25%;
}

section img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vh;  
  min-height:100vh;
  z-index: -2;
  transition: 1.5s;
  opacity: 0;
}

ul li a:hover+img {
  opacity: 1;
}

a:link {
  font-size: 1000%;
  font-family: 'Heebo', sans-serif;
  color: #ffffff;
  text-decoration: none;
}

a.link1:hover {
  text-shadow: -5px 0 sienna, 0 5px salmon, 5px 0 salmon, 0 -5px salmon;
  background-image: url(https://images.pexels.com/photos/947785/pexels-photo-947785.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: auto;
}

a.link2:hover {
  text-shadow: -5px 0 teal, 0 5px moccasin, 5px 0 moccasin, 0 -5px moccasin;
}
a.link3:hover {
  text-shadow: -5px 0 navy, 0 5px coral, 5px 0 coral, 0 -5px coral;
}
.special {
  display: inline;
  text-shadow: -4px 0 teal, 0 4px teal, 4px 0 salmon, 0 -4px salmon;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- IMPORTED FONTS -->
  <link href="https://fonts.googleapis.com/css?family=Heebo:800" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">

<div class="container">
    <br><br>
    <h1>Hi! I'm
      <div class="special">Angelina.</div>
    </h1>

    <h2>Get to know me as a</h2>
    <section>
      <ul>
        <li><a class="link1" href="student.html">Student</a></li>

        <li><a class="link2" href="maker.html">Maker</a><img src="https://images.pexels.com/photos/1110357/pexels-photo-1110357.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" style='height:100%; width: 100%; object-fit: cover'></li>

        <li><a class="link3" href="volunteer.html">Volunteer</a><img src="https://images.pexels.com/photos/4839/nature-river-waterfall.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"></li>
      </ul>
    </section>
  </div>
0 голосов
/ 30 мая 2018

Это потрясающий вопрос!Ожидается, что CSS будет стилизовать элементы, основываясь на том, где они находятся в DOM, а не на том, что они содержат ... есть концепция: has selector (https://developer.mozilla.org/en-US/docs/Web/CSS/:has), но, вероятно, никогда не будет реализована.

И если я понял вопрос, у вас, по сути, он работал (с хитрым трюком). Я просто исправил этот раздел вашего кода: 

section img {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: -2;
  transition: 1.5s;
  opacity: 0;
}

проверьте эту скрипку: https://jsfiddle.net/etdmxy2e/

Отредактировано:

Я создал более чистую скрипку, используя ваш крутой трюк, который также решает проблему соотношения изображений, используя background-image вместо img : https://jsfiddle.net/L8tspdz6/

0 голосов
/ 30 мая 2018

Вы должны пойти на background-image вместо <img> элемента, чтобы получить желаемый результат.Вот решение для вас. 

<html lang="en">

  <head>
    <title>TEST</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- CSS -->
    <link href="style.css" rel="stylesheet" type="text/css">

    <!-- IMPORTED FONTS -->
    <link href="https://fonts.googleapis.com/css?family=Heebo:800" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
  </head>

  <body>

    <div class="container">
      <br><br>
      <h1>Hi! I'm
        <div class="special">Angelina.</div>
      </h1>

      <h2>Get to know me as a</h2>
      <section>
        <ul>
          <li class="link1"><a href="student.html">Student</a>
            <span class="bgimg" style="background-image:url(https://images.pexels.com/photos/947785/pexels-photo-947785.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);"></span></li>

          <li class="link2"><a href="maker.html">Maker</a>
            <span class="bgimg" style="background-image:url(https://images.pexels.com/photos/1110357/pexels-photo-1110357.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);"></span></li>

          <li class="link3"><a href="volunteer.html">Volunteer</a>
            <span class="bgimg" style="background-image:url(https://images.pexels.com/photos/4839/nature-river-waterfall.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);"></span></li>
        </ul>
      </section>
    </div>

  </body>

</html>

И CSS, 

@import url('https://fonts.googleapis.com/css?family=Montserrat:bold');
* {
  margin: 0;
  padding: 0;
}

body {
  padding: 0;
  background-image: url("https://images.pexels.com/photos/261899/pexels-photo-261899.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

section {
  width: 100%;
}

h1 {
  font-family: 'Heebo', sans-serif;
  font-size: 500%;
  text-transform: uppercase;
  color: #ffffff;
}

h2 {
  font-family: 'Heebo', sans-serif;
  text-transform: uppercase;
  color: #ffffff;
}

p {
  font-family: 'Merriweather', serif;
  font-size: 150%;
  color: #ffffff;
}

ul {
  width: 100%;
  margin: 0;
  margin-left: 1em;
  padding: 0;
}

ul li {
  list-style: none;
  width: 25%;
}

section img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  transition: 1.5s;
  opacity: 0;
}

ul li a:hover+img {
  opacity: 1;
}

a:link {
  font-size: 1000%;
  font-family: 'Heebo', sans-serif;
  color: #ffffff;
  text-decoration: none;
}

a.link1:hover {
  text-shadow: -5px 0 sienna, 0 5px salmon, 5px 0 salmon, 0 -5px salmon;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: auto;
}

}

a.link2:hover {
  text-shadow: -5px 0 teal, 0 5px moccasin, 5px 0 moccasin, 0 -5px moccasin;
}

a.link3:hover {
  text-shadow: -5px 0 navy, 0 5px coral, 5px 0 coral, 0 -5px coral;
}

.special {
  display: inline;
  text-shadow: -4px 0 teal, 0 4px teal, 4px 0 salmon, 0 -4px salmon;
}

body {
  position: relative;
}

.bgimg {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background-repeat: no-repeat;
  background-position: left top;
  background-size: cover;
  display: none;
  z-index: -1;
}

.link1:hover .bgimg,
.link2:hover .bgimg,
.link3:hover .bgimg {
  display: block;
}
...