房产网站建设整体架构,产品怎么做市场推广,wordpress问答主题,永州网络推广未悬浮效果 悬浮效果 如果仅仅是添加绝对定位#xff0c;那么遇到白色图片#xff0c;就会看不到白色字体。通过遮罩#xff08;绝对定位透明度#xff09;就可以解决这个问题。 script setup
/scripttemplatediv classbox那么遇到白色图片就会看不到白色字体。通过遮罩绝对定位透明度就可以解决这个问题。 script setup
/scripttemplatediv classboxel-image classimg src/public/p1.png/div classmaskdiv删除/div/div/div
/templatestyle langscss scoped
.box {height: 100px;width: 100px;position: relative;margin: 100px auto;.img {width: 100%;height: 100%;}.mask {height: 100%;width: 100%;position: absolute;left: 0;top: 0;display: flex;justify-content: center;align-items: center;background-color: rgba(0, 0, 0, 0.3);opacity: 0;transition: opacity .5s ease-in-out;cursor: pointer;color: #ffffff;}:hover .mask {opacity: 1;}
}
/style
