链接悬停时无法使图像填充背景并保持纵横比答案

【问题标题】：Unable to make image fill up background and preserve aspect ratio upon link hover链接悬停时无法使图像填充背景并保持纵横比
【发布时间】：2018-11-08 18:47:20
【问题描述】：

我正在尝试在后台进行图像更改以填充屏幕并在链接悬停结束时覆盖原始背景图像。到目前为止，我只有三个结果结束：

Link1：图像被限制在列表项中（但看起来纵横比被保留了）。
Link2：图像保持比例但不填满屏幕。
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>

【问题讨论】：

标签： html css hover background-image aspect-ratio

【解决方案1】：

您应该选择 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;
}

【讨论】：

【解决方案2】：

请试试这个代码：

我对 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>

【讨论】：

【解决方案3】：

这是一个很棒的问题！ CSS 应该根据元素在 DOM 上的位置而不是它们包含的内容来设置元素样式...有一个 :has 选择器 (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/

【讨论】：