Question

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

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>

Answer 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;
}

Answer 2

请尝试以下代码：

我对HTML和CSS代码进行了少量更改。

＆＃13;

@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;
}

＆＃13;

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

＆＃13;

Answer 3

这是一个很棒的问题！ CSS应该根据它们在DOM上的位置来设置样式，而不是基于它们包含的内容......有一个概念：有选择器（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/

无法在链接悬停时使图像填满背景并保留纵横比

3 个答案: