如何在悬停时淡化 3 individual div 背景颜色（html，CSS）

Question

我正在尝试（以一种简单的方式）模仿此页面的样式： http://www.smoolis.com/screen/pricing/language/en

本质上，我的目标是创建三个顶部有产品图片的表格，三个图片背后的背景颜色在悬停时略有变化，呈现淡入淡出效果。

我能找到很多图像变化的例子，但很少有 div 的背景颜色 - 你有这样的例子吗？

我的 WIP 代码在这里可用，但它有两个问题： 1）我想在3张图片后面添加三种不同的背景颜色 2）理想情况下，我不希望图像褪色，而是背景颜色 3）我希望背景颜色独立淡出 - 例如现在图像同时褪色

任何帮助将不胜感激！

<style>
table {
    border-collapse: collapse;
    width: 100%;
}
th, td {
    padding: 8px;
    text-align: center;
    border-bottom: 1px solid #ddd;
}
.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}
.container {
    position: relative;
    width: 50%;
}
.container:hover .image {
  opacity: 0.8;
}
</style>

<div id="columns">
<div class="one-third">
  <div class="container">
    <img src="http://mikemoir.com/mikemoir/wp-content/uploads/2015/06/MedRes_Product-presentation-2.jpg" alt="Avatar" class="image">
    <div class="overlay"></div></div>
<table>
  <tbody><tr>
    <th>Firstname</th>
   </tr>
  <tr>
    <td>Peter</td>
   </tr>
  <tr>
    <td>Lois</td>
   </tr>
  <tr>
    <td>Joe</td>
    </tr>
  <tr>
    <td>Cleveland</td>
     </tr>
</tbody></table>
</div>
<div class="one-third">
  <div class="container">
    <img src="http://mikemoir.com/mikemoir/wp-content/uploads/2015/06/MedRes_Product-presentation-2.jpg" alt="Avatar" class="image">
    <div class="overlay"></div></div>
<table>
  <tbody><tr>
    <th>Firstname</th>
   </tr>
  <tr>
    <td>Peter</td>
   </tr>
  <tr>
    <td>Lois</td>
   </tr>
  <tr>
    <td>Joe</td>
    </tr>
  <tr>
    <td>Cleveland</td>
     </tr>
</tbody></table>

</div>
<div class="one-third-last">
  <div class="container">
    <img src="http://mikemoir.com/mikemoir/wp-content/uploads/2015/06/MedRes_Product-presentation-2.jpg" alt="Avatar" class="image">
    <div class="overlay"></div></div>
<table>
  <tbody><tr>
    <th>Firstname</th>
   </tr>
  <tr>
    <td>Peter</td>
   </tr>
  <tr>
    <td>Lois</td>
   </tr>
  <tr>
    <td>Joe</td>
    </tr>
  <tr>
    <td>Cleveland</td>
     </tr>
</tbody></table>
</div>
</div>

Answer 1

解决你的三个问题：

在它们当前的形式中，无法将背景颜色添加到这些图像中，因为它们已经具有白色背景。如果您想调整这些图像的背景颜色，您需要在照片编辑程序中删除背景。
如果您确实使用了具有透明背景的图像，那么以下内容将允许您淡化图像的背景。

.container .image {
  background-color:blue;
  transition:background-color 1s;
}

.container .image:hover {
  background-color:LightBlue;
}

<div class=container>
  <img class="image" src="https://www.drupal.org/files/issues/test-transparent-background.png">
</div>
<div class=container>
<img class="image" src="https://www.drupal.org/files/issues/test-transparent-background.png">
</div>

对您的示例代码进行的简单测试表明，至少在我的情况下，图像确实会单独淡出。

此外，在我如何使用透明图像执行此操作的示例中，我将悬停属性放在图像上而不是容器上。如果您希望以与示例相同的方式使用淡入淡出功能，则可以将该行更改为 .container:hover .image.

Answer 2

您需要单独设置color:#xxxxxx。并且您的图片背景位于名为 container 的 "background" 的前面，您需要一个 .PNG，这样背景才会可见。

<style>
table {
    border-collapse: collapse;
    width: 100%;
}
th, td {
    padding: 8px;
    text-align: center;
    border-bottom: 1px solid #ddd;
}
.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}
.container {
    position: relative;
    width: 50%;
}
.container:hover .image {
  opacity: 0.7;
}

.container.color1:hover {
  background-color:#51c2bc;
}
.container.color2:hover {
  background-color:#35a9d2;
}
.container.color3:hover {
  background-color:#007cab;
}
</style>

<div id="columns">
<div class="one-third">
  <div class="container color1">
    <img src="http://mikemoir.com/mikemoir/wp-content/uploads/2015/06/MedRes_Product-presentation-2.jpg" alt="Avatar" class="image">
    <div class="overlay"></div></div>
<table>
  <tbody><tr>
    <th>Firstname</th>
   </tr>
  <tr>
    <td>Peter</td>
   </tr>
  <tr>
    <td>Lois</td>
   </tr>
  <tr>
    <td>Joe</td>
    </tr>
  <tr>
    <td>Cleveland</td>
     </tr>
</tbody></table>
</div>
<div class="one-third">
  <div class="container color2">
    <img src="http://mikemoir.com/mikemoir/wp-content/uploads/2015/06/MedRes_Product-presentation-2.jpg" alt="Avatar" class="image">
    <div class="overlay"></div></div>
<table>
  <tbody><tr>
    <th>Firstname</th>
   </tr>
  <tr>
    <td>Peter</td>
   </tr>
  <tr>
    <td>Lois</td>
   </tr>
  <tr>
    <td>Joe</td>
    </tr>
  <tr>
    <td>Cleveland</td>
     </tr>
</tbody></table>

</div>
<div class="one-third-last">
  <div class="container color3">
    <img src="http://mikemoir.com/mikemoir/wp-content/uploads/2015/06/MedRes_Product-presentation-2.jpg" alt="Avatar" class="image">
    <div class="overlay"></div></div>
<table>
  <tbody><tr>
    <th>Firstname</th>
   </tr>
  <tr>
    <td>Peter</td>
   </tr>
  <tr>
    <td>Lois</td>
   </tr>
  <tr>
    <td>Joe</td>
    </tr>
  <tr>
    <td>Cleveland</td>
     </tr>
</tbody></table>
</div>
</div>

如何在悬停时淡化 3 individual div 背景颜色（html，CSS）

How to fade 3 individual div background colors on hover (html, CSS)

html

css

fade

background-color