如何使图像淡出而不影响同时发出明亮辉光效果的不透明度？
如何使图像淡出而不影响同时发出明亮辉光效果的不透明度？
提问于 2018-05-31 03:58:55
更新的代码：
#main-imgs {
margin-top: 70px;
}
/* container for each image */
#main-imgs .img-column {
display: inline-block; /* conform container to image size */
overflow: hidden; /* avoid image-border overlap */
max-height: 215px;
padding: 0px; /* fit image within border */
border-width: 8px;
border-radius: 15%;
border-style: double;
border-color: #290B01;
box-shadow: 0px 0px 0px 0px black;
transition: all .6s ease-in-out;
}
/* container hover event */
#main-imgs .img-column:hover {
box-shadow: 0px 0px 30px 0px white;
transition: all .6s ease-in-out;
}
/* image */
#main-imgs img {
vertical-align: middle; /* rid of space beneath image */
opacity: 1.0;
transition: all .6s ease-in-out;
}
/* image hover event */
#main-imgs img:hover {
opacity: 0.2;
transition: all .6s ease-in-out;
}
我试图让图像在黑色背景上悬停时同时淡出并同时发光。
问题是当它淡出时，其不透明度下降，并影响所有属性，包括 box-shadow.
结果，发光效果的不透明度降低并熄灭发光。到目前为止，当您将鼠标悬停在图像上方时，图像会淡入淡出。我已经包含下面的CSS代码。
#main-imgs img {
max-height: 220px;
border-width: 8px;
border-radius: 15%;
border-style: double;
border-color: #290B01;
opacity: 1.0;
transition: all .6s ease-in-out;
}
#main-imgs img:hover {
opacity: 0.2;
transition: all .6s ease-in-out;
}
我有两种可能的（并发）解决方案，但还没有找到一种方法来实现：
- 创造一个“衬底”，
div在这个形象下投射出自己毫不搀杂的光芒 - 使用
hover伪类和opacity属性以外的东西来模拟和隔离淡化效果（例如使用jQuery）。
回答 1
Stack Overflow用户
发布于 2018-05-31 13:56:49
首先，我们需要为“底层”创建一个结构。这只是一个父容器：
<div class="img">
<img src="URL" alt="description" />
</div>
现在，只需添加border和border-radius父容器，而不是图像。为了使容器适应图像的大小，我们必须使用display: inline-block。我们还需要进行设置，overflow: hidden以便图像适合border-radius容器。最后但并非最不重要的，我们应该使用vertical-align: middle图像，所以底部没有空间。
最后，这导致我们看到下面的代码示例，其中淡出和发光效果都正常工作：
body {
background-color: #000;
}
.img {
display: inline-block;
border: 8px double #290B01;
border-radius: 15%;
overflow: hidden;
}
.img > img {
max-height: 220px;
opacity: 1.0;
transition: all .6s ease-in-out;
vertical-align: middle;
}
.img > img:hover {
opacity: 0.2;
transition: all .6s ease-in-out;
}
<div class="img">
<img src="http://via.placeholder.com/100x100" alt="description" />
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100008609
复制相关文章
相似问题