当图像处于活动状态时，如何将青色放在图像顶部？答案

【问题标题】：How do i put the cyan color on top of my image while the image is in active state?当图像处于活动状态时，如何将青色放在图像顶部？
【发布时间】：2022-01-17 03:31:44
【问题描述】：

我想在图像处于活动状态时设置青色效果。我该怎么做？

I want my image to look like this while it is in active state。我尝试使用叠加效果，但它似乎不起作用。我希望图像看起来像所附图像。我尝试使用叠加类创建一个空 div，并尝试向叠加层添加一些宽度高度 opactiy，但叠加层没有出现在图像上，它位于图像下方并停留在那里。

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="stylesheet" href="style.css">

  <title>Frontend Mentor | NFT preview card component</title>


</head>
<body>

  <div class="container">
    <img src="/images/image-equilibrium.jpg" alt="Image Equilibrium" class="img-1">
    <!-- <span class="overlay"></span> -->
    <!-- <img src="/images/icon-view.svg" alt="view" class='view'> -->
    <h1>Equilibrium #3429</h1>
    <p>Our Equilibrium collection promotes balance and calm.</p>
    <img src="/images/icon-ethereum.svg" alt="Ethereum" class="img-2"><span class="eth">0.041 ETH</span>
    <img src="/images/icon-clock.svg" alt="Clock" class="img-3"><span class="clock">3 days left</span>
    <div class="line"></div>
    <img src="images/image-avatar.png" alt="creator" class="img-4">
    <span class='creation'>Creation of </span><span class="creator">Jules Wyvern</span>


  </div>

  <div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
    Coded by <a href="https://www.linkedin.com/in/nelson-uprety-951a2b156/">Nelson Uprety</a>.
  </div>
</body>
</html>


@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&family=Raleway:wght@800&family=Roboto:wght@300&display=swap');

* {
    box-sizing: border-box;
}

body {
    font-family: 'Outfit', sans-serif;
    background-color: hsl(217, 54%, 11%);
}

.container {
    background-color: hsl(216, 50%, 16%);
    height: 570px;
    width: 350px;
    border-radius: 5%;
    margin: 40px 60px;
    display: inline-block;
}

.img-1 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    width: 80%;
    border-radius: 5%;
}

h1 {
    font-size: 1.5em;
    font-weight: 600;
    color: hsl(0, 0%, 100%);
    margin-left: 32px;
}

h1:hover,
h1:active {
    color: hsl(178, 100%, 50%);
    cursor: pointer;
}

p {
    font-size: 18px;
    /* color: rgba(248, 245, 245, 0.5); */
    color: hsl(215, 51%, 70%);
    font-weight: 300;
    margin-left: 30px;
}

.img-2 {
    margin-left: 20px;
    margin-top: 5px;
    padding-right: 10px;
}

.img-3 {
    margin-left: 130px;
}

.img-4 {
    width: 20%;
    margin-left: 20px;
    padding-right: 30px;
}

.eth {
    color: hsl(178, 100%, 50%);

}

.clock {
    color: hsl(215, 51%, 70%);
}

.line {
    margin: 20px;
    border-bottom: 1px solid hsl(215, 32%, 27%);
}

.creation {
    color: hsl(215, 51%, 70%);
}

.creator {
    color: hsl(0, 0%, 100%);
}

.creator:active,
.creator:hover {
    color: hsl(178, 100%, 50%);
    cursor: pointer;
}

.attribution {
    font-size: 11px;
    text-align: center;
}

.attribution a {
    color: hsl(228, 45%, 44%);
}

【问题讨论】：

标签： html css hover

【解决方案1】：

您需要将<i> 替换为另一个图标才能更好看

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.image-wrapper {
  width: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.image-wrapper img {
  border-radius: 40px;
}

i {
  display: none;
}

.overlay {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 300px;
  background: rgba(255, 0, 0, 0.3);
  border-radius: 40px;
}

.active i,
.active .overlay {
  display: block;
}


/* not important*/

i {
  height: 50px;
  width: 50px !important;
  background: blue;
  z-index: 9;
  border-radius: 100%;
  position: absolute;
}

<h3>Active</h3>
<div class="image-wrapper active">
  <span class="overlay"></span>
  <img src="https://via.placeholder.com/300" />
  <i></i>
</div>
<br>
<h3>NOT Active</h3>
<div class="image-wrapper">
  <span class="overlay"></span>
  <img src="https://via.placeholder.com/300" />
  <i></i>
</div>

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案2】：

解决方案可能是将mix-blend-mode 添加到 img 的兄弟姐妹中。

在您的示例中，我添加了 "blender" div。这个div 包含原始图像和一个div 类"img-blender"。

为此div我添加了一个青色背景，用于测试目的，以及一个mix-blend-mode: color;

请看我的codepen。

我稍微更改了 HTML 以显示演示图像：

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="stylesheet" href="style.css">

  <title>Frontend Mentor | NFT preview card component</title>


</head>
<body>

  <div class="container">
    <div class="blender">
    <img src="https://images.ctfassets.net/hrltx12pl8hq/7yQR5uJhwEkRfjwMFJ7bUK/dc52a0913e8ff8b5c276177890eb0129/offset_comp_772626-opt.jpg?fit=fill&w=800&h=300" alt="Image Equilibrium" class="img-1">
      <div class="img-blender"></div>
      </div>
    <!-- <span class="overlay"></span> -->
    <!-- <img src="/images/icon-view.svg" alt="view" class='view'> -->
    <h1>Equilibrium #3429</h1>
    <p>Our Equilibrium collection promotes balance and calm.</p>
    <img src="/images/icon-ethereum.svg" alt="Ethereum" class="img-2"><span class="eth">0.041 ETH</span>
    <img src="/images/icon-clock.svg" alt="Clock" class="img-3"><span class="clock">3 days left</span>
    <div class="line"></div>
    <img src="images/image-avatar.png" alt="creator" class="img-4">
    <span class='creation'>Creation of </span><span class="creator">Jules Wyvern</span>


  </div>

  <div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
    Coded by <a href="https://www.linkedin.com/in/nelson-uprety-951a2b156/">Nelson Uprety</a>.
  </div>
</body>
</html>

这里是 CSS

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&family=Raleway:wght@800&family=Roboto:wght@300&display=swap');

* {
    box-sizing: border-box;
}

body {
    font-family: 'Outfit', sans-serif;
    background-color: hsl(217, 54%, 11%);
}

.container {
    background-color: hsl(216, 50%, 16%);
    height: 570px;
    width: 350px;
    border-radius: 5%;
    margin: 40px 60px;
    display: inline-block;
}

.blender {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;  
}

.img-1,
.img-blender {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  margin-top: 30px;
  width: 80%;
  border-radius: 5%;  
  justify-self: center;
}

.img-1 {  
  display: block;
  margin-left: auto;
  margin-right: auto;  
}

.img-blender {
  mix-blend-mode: color;
  background-color: cyan;
}

h1 {
    font-size: 1.5em;
    font-weight: 600;
    color: hsl(0, 0%, 100%);
    margin-left: 32px;
}

h1:hover,
h1:active {
    color: hsl(178, 100%, 50%);
    cursor: pointer;
}

p {
    font-size: 18px;
    /* color: rgba(248, 245, 245, 0.5); */
    color: hsl(215, 51%, 70%);
    font-weight: 300;
    margin-left: 30px;
}

.img-2 {
    margin-left: 20px;
    margin-top: 5px;
    padding-right: 10px;
}

.img-3 {
    margin-left: 130px;
}

.img-4 {
    width: 20%;
    margin-left: 20px;
    padding-right: 30px;
}

.eth {
    color: hsl(178, 100%, 50%);

}

.clock {
    color: hsl(215, 51%, 70%);
}

.line {
    margin: 20px;
    border-bottom: 1px solid hsl(215, 32%, 27%);
}

.creation {
    color: hsl(215, 51%, 70%);
}

.creator {
    color: hsl(0, 0%, 100%);
}

.creator:active,
.creator:hover {
    color: hsl(178, 100%, 50%);
    cursor: pointer;
}

.attribution {
    font-size: 11px;
    text-align: center;
}

.attribution a {
    color: hsl(228, 45%, 44%);
}

【讨论】：