css半透明悬浮层

CSS半透明悬浮层是Web开发中经常用到的一种效果。悬浮层可以在网页中显示一些重要的信息，比如弹出公告或者浮动广告等等。半透明悬浮层的效果可以比较好地与页面元素进行交互，提高用户的体验效果。

/* CSS代码 */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0.5);
    display: none;
}
.overlay-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 500px;
    height: 300px;
    background-color: #fff;
    z-index: 99;
    padding: 20px;
    Box-sizing: border-Box;
}
.overlay-close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    color: #999;
    cursor: pointer;
}

css半透明悬浮层

上述代码中，我们使用position:absolute;将.overlay和.overlay-content设置为绝对定位，使其脱离文档流，不占据页面原有的空间。同时，我们通过display:none;隐藏悬浮层，待鼠标点击来触发显示。在.overlay中，我们设置了背景颜色为rgba(0,0.5);，其中rgba()中的最后一个参数0.5表示透明度为50%。

.overlay-content中，我们设置了悬浮层的内容区域的宽高和背景颜色。其中，transform: translate(-50%,-50%);用于居中显示悬浮层；z-index用于设置悬浮层的层级，保证其在页面中显示在最上层。

最后，我们设置了一个关闭按钮，用户可以点击该按钮来关闭悬浮层。通过position: absolute;和top: 10px; right: 10px;来定位关闭按钮的位置。

相关推荐