img:hover 不适用于背景色答案

【问题标题】：img:hover doesn't works with background-colorimg:hover 不适用于背景色
【发布时间】：2016-07-27 16:06:16
【问题描述】：

我想为图像添加悬停效果，但它不适合我。当我添加像 opacity 0.4 这样的 css 样式时，它可以工作，但不能使用背景颜色。有人可以帮我吗？例如，我想做不透明度小的红色背景，以及像“+”这样的小图标垂直和水平居中，因为它将是小灯箱。

我有第二个问题，但它不如第一个问题重要。如何在垂直和水平单击时显示 img。我感谢各种帮助！

代码如下：

HTML 和 CSS：

html,body {
  font-family: 'Raleway', sans-serif;
  padding: 0 2em;
  font-size: 18px;
  background: #222;
  color: #aaa;
  text-align:center;}

h1 {
  font-size: 3em;
  font-weight: 200;
  margin: 0.5em 0 0.2em 0;}

p {
  margin: 1.5em 0;
  color: #888;}

.italic { font-style: italic; }
.small { font-size: 0.8em; }

.lightbox {
	display: none;
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.8);}

.lightbox img {
	max-width: 90%;
	max-height: 80%;
	margin-top: 2%;
    display: inline-block;}

.normal-img img:hover{
  opacity:0.6;
  background: red;}

.lightbox:target {
	outline: none;
	display: block;}

<h1>CSS Lightbox</h1>
<p>Click the thumbnail below to activate the lightbox</p>
<a href="#img1" class="normal-img">
  <img src="http://placehold.it/350x150">
</a>
<a href="#_" class="lightbox" id="img1">
  <img src="http://placehold.it/350x150">
</a>

【问题讨论】：

标签： jquery css hover

【解决方案1】：

尝试将图像放入 div 并将背景应用到 div：

#container {
  background: red;
  height: 150px;
  width: 350px;
  position: absolute;
  margin: auto;
  top: 0;left: 0;right: 0;bottom: 0;
}
#container img:hover {
  opacity: 0.6
}

<div id="container">
  <img src="http://placehold.it/350x150">
</div>

【讨论】：