Question

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

我有第二个问题但是作为第一个问题并不重要。如何在垂直和水平方向上单击显示img。我感谢各种帮助！

这是代码：

HTML＆amp; 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>

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

img：hover不适用于背景色

1 个答案: