Css 不透明度改变和圆形覆盖的图像？

我觉得这并不难，但我似乎无法理解。我的主要问题是，当鼠标悬停在图像上时，圆圈覆盖出现。这就是我想到的

.box {
color: #212121;
padding: 0;
float: left;
margin: 5px;
width: 225px;
height: 85px;
background: #ffffff;
}

.box img{
text-align: center;
width: 75px;
height: 75px;
-moz-transition-duration:0.6s;
-webkit-transition-duration:0.6s;
-o-transition-duration:0.6s;
}

.box img:hover .circle{
opacity:0.5;
-moz-transition-duration:0.6s;
-webkit-transition-duration:0.6s;
-o-transition-duration:0.6s;
 }

.circle{
position: absolute;    
text-align:center;
width:30px;
height:30px;
background-color:#fff;
font-family: calibri;
font-size:18px;
line-height:28px;
padding:15px;
margin: -70px 8px;
opacity:0;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-moz-transition-duration:0.6s;
-webkit-transition-duration:0.6s;
-o-transition-duration:0.6s;
}

---

您的主要问题是您希望

img

作为一个孩子拥有

.circle

，这是不可能的，因为

img

是一个自包含的元素

只要您的HTML是正确的：

<div class="box">
    <img src="self.jpg" alt="" />
    <div class="circle"></div>
</div>

---

您的主要问题是您希望

img

作为一个孩子拥有

.circle

，这是不可能的，因为

img

是一个自包含的元素

只要您的HTML是正确的：

<div class="box">
    <img src="self.jpg" alt="" />
    <div class="circle"></div>
</div>

---

你能添加有问题的HTML吗？甚至可以做一把小提琴来显示你的代码。不再需要

-moz-

前缀，从代码中清除这些前缀。不确定

-o-

和

-webkit-

@Martijn根据，如果不是Android，你可以抛弃

-webkit-

，而

-o-

显然从一开始就不是一件大事（只有一个版本）。无论如何，我认为编辑一个问题的代码，因为不再需要某些东西是一个可怕的想法！您可能无意中隐藏了问题的真正原因。当然，这里不是这样，但你仍然有效地改变了问题。更不用说：包括带前缀的版本并没有什么坏处，而且您可能会添加对所有用户的额外支持。1%。将其回滚。我怀疑这是个问题，但你的观点仍然是，你能添加有问题的HTML吗？甚至可以做一把小提琴来显示你的代码。不再需要

-moz-

前缀，从代码中清除这些前缀。不确定

-o-

和

-webkit-

@Martijn根据，如果不是Android，你可以抛弃

-webkit-

，而

-o-

显然从一开始就不是一件大事（只有一个版本）。无论如何，我认为编辑一个问题的代码，因为不再需要某些东西是一个可怕的想法！您可能无意中隐藏了问题的真正原因。当然，这里不是这样，但你仍然有效地改变了问题。更不用说：包括带前缀的版本并没有什么坏处，而且您可能会添加对所有用户的额外支持。1%。将其回滚。我怀疑这是个问题，但你的观点仍然存在