在悬停（sass）上覆盖清晰的背景颜色
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在悬停（sass）上覆盖清晰的背景颜色相关的知识，希望对你有一定的参考价值。
我有一个带背景图像的div。我希望能够在悬停时设置黑色透明覆盖。我怎样才能做到这一点？
这就是我到目前为止所拥有的
div {
background: url('map-tracks.png');
background-size: cover;
transition: background-color 1s;
&:hover {
background-color: rgba(0, 0, 0, 0.5);
}
}
答案
假设您确实想要查看背景图像，请使用伪元素。
div {
background: url('http://via.placeholder.com/200x200');
background-size: cover;
transition: background-color 1s;
width: 200px;
height: 200px;
}
div:hover:after
{
background: rgba(0, 0, 0, 0.50);
content: '';
position: absolute;
width: 200px;
height: 200px;
}<div></div>另一答案
放置具有绝对或相对定位的叠加（div或其他）以及适当的黑色半透明样式。无论如何，你需要另一个对象用于叠加层。
以上是关于在悬停（sass）上覆盖清晰的背景颜色的主要内容，如果未能解决你的问题，请参考以下文章