[分享]css半透明的玻璃效果

CSS半透明的玻璃效果可以为网页添加一种独特的装饰，让页面变得更加美观。实现这种效果的关键是利用CSS的opacity属性来控制元素的透明度。下面是一个实现玻璃效果的例子： html、body { h...

CSS半透明的玻璃效果可以为网页添加一种独特的装饰，让页面变得更加美观。实现这种效果的关键是利用CSS的opacity属性来控制元素的透明度。下面是一个实现玻璃效果的例子：

 html、body {
        height: 100%;
    }

    .bg-img{
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-image: url(./images/bg-image.jpg);
        background-size: cover;
        filter: blur(10px);
        z-index: -1;
    }

    .content {
        position: relative;
        z-index: 1;
        width: 50%;
        margin: auto;
        padding: 20px;
        border-radius: 10px;
        background-color: rgba(255, 255, 255, 0.7);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    } 

代码中的.bg-img类用于设置背景图片，并通过filter属性的blur函数实现图片的模糊效果。该类的z-index为-1，防止遮挡content类的内容。content类是一个较为简单的div容器，通过设置rgba颜色的背景使其半透明，并设置了box-shadow属性以增加立体感。content类的z-index较高（1），使其内容置于页面顶层。

使用CSS半透明的玻璃效果可以使网页的颜色更加鲜明生动，图片更加生动，文本内容更加清晰易读。