| 12345678910111213141516171819202122232425262728293031 |
- /* pages/test/test.wxss */
- .pic_07{
- width: 600rpx;
- height:480rpx;
- }
- /* 添加毛玻璃效果容器样式 */
- .frosted-glass {
- position: relative;
- width: 600rpx;
- height: 480rpx;
- overflow: hidden;
- }
- .frosted-glass::before {
- content: "";
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-color: rgba(255, 255, 255, 0.2); /* 半透明白色背景 */
- filter: blur(30px); /* 适度模糊,产生毛玻璃感 */
- z-index: -1;
- }
- .frosted-glass image {
- position: relative;
- z-index: 1;
- width: 100%;
- height: 100%;
- }
|