Question

我正试图让图像在悬停时略微偏红。我设法让不透明度从0.8变为1.0，并在悬停时略微放大，但我不知道为什么图像没有变成略微变红。失败的代码是：

background-color: rgba(110,0,0,.5);

有谁能在这里暗示我做错了什么？感谢任何帮助，谢谢

.subsection-parent{
	width:286px;
	height:auto;
	margin-right:51px;
	float:left;
}
.subsection-big-brother{
	width:282px;
	height:282px;
	border:2px solid #2778BA;
	overflow:hidden;
	margin-bottom:50px;
}
.subsection-child{
	width:100%;
	height:100%;
	opacity:0.8;
}
.subsection-child:hover {
	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
	opacity: 1;
	/* GROW! */
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
  /* The below does not work */
  background-color: rgba(110,0,0,.5);
}
.elephant{
	background:url(http://cdn.publishyourarticles.net/wp-content/uploads/2015/07/elephants-9a.jpg);
}

<div class="subsection-parent">
<a href="#">
<div class="subsection-big-brother">
<div class="subsection-child elephant"></div>
</div>
<h3>H3 Text</h3></a>
</div>

Answer 1

因为background-color适用于已经是全尺寸宽度/高度的background-image。使用伪元素或其他html元素作为背景颜色

这是一个例子

＆＃13;

.subsection-parent {
  width: 286px;
  height: auto;
  margin-right: 51px;
  float: left;
}
.subsection-big-brother {
  width: 282px;
  height: 282px;
  border: 2px solid #2778BA;
  overflow: hidden;
  margin-bottom: 50px;
}
.subsection-child {
  width: 100%;
  height: 100%;
  opacity: 0.8;
}
/* EXAMPLE */
.subsection-child:hover:before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  /* The below does not work */
  background-color: rgba(110, 0, 0, .5);
}
.subsection-child:hover {
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 0.4s;
  opacity: 1;
  /* GROW! */
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.elephant {
  background: url(http://cdn.publishyourarticles.net/wp-content/uploads/2015/07/elephants-9a.jpg);
}

＆＃13;

<div class="subsection-parent">
  <a href="#">
    <div class="subsection-big-brother">
      <div class="subsection-child elephant"></div>
    </div>
    <h3>H3 Text</h3>
  </a>
</div>

＆＃13;

Answer 2

你可以试试这个......

给.subsection-big-brother背景色。将不透明度设置为0.此处也添加过渡属性。

.subsection-big-brother {
  background-color: rgba(110, 0, 0, 0);
  transition: .4s;
}

当您将鼠标悬停在.subsection-big-brother上时，将不透明度更改为1 - 实际上将该div变为红色。

.subsection-big-brother:hover {
  background-color: rgba(110, 0, 0, 1);
}

您可以通过调整悬停时.subsection-child的不透明度来确定您希望在此基础上看到多少图像。

.subsection-child:hover {
  opacity: .5;
}

.subsection-parent {
  width: 286px;
  height: auto;
  margin-right: 51px;
  float: left;
}
.subsection-big-brother {
  width: 282px;
  height: 282px;
  border: 2px solid #2778BA;
  overflow: hidden;
  margin-bottom: 50px;
  background-color: rgba(110, 0, 0, 0);
  transition: .4s;
}
.subsection-big-brother:hover {
  background-color: rgba(110, 0, 0, 1);
}
.subsection-child {
  width: 100%;
  height: 100%;
  opacity: 0.8;
  transition: .4s;
}
.subsection-child:hover {
  opacity: .5;
  /* GROW! */
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  /* The below does not work */
}
.elephant {
  background: url(http://cdn.publishyourarticles.net/wp-content/uploads/2015/07/elephants-9a.jpg);
}

<div class="subsection-parent">
  <a href="#">
    <div class="subsection-big-brother">
      <div class="subsection-child elephant"></div>
    </div>
    <h3>H3 Text</h3>
  </a>
</div>

悬停不工作时图像阴影发生变化

2 个答案: