test.wxss 562 B

12345678910111213141516171819202122232425262728293031
  1. /* pages/test/test.wxss */
  2. .pic_07{
  3. width: 600rpx;
  4. height:480rpx;
  5. }
  6. /* 添加毛玻璃效果容器样式 */
  7. .frosted-glass {
  8. position: relative;
  9. width: 600rpx;
  10. height: 480rpx;
  11. overflow: hidden;
  12. }
  13. .frosted-glass::before {
  14. content: "";
  15. position: absolute;
  16. top: 0;
  17. left: 0;
  18. right: 0;
  19. bottom: 0;
  20. background-color: rgba(255, 255, 255, 0.2); /* 半透明白色背景 */
  21. filter: blur(30px); /* 适度模糊,产生毛玻璃感 */
  22. z-index: -1;
  23. }
  24. .frosted-glass image {
  25. position: relative;
  26. z-index: 1;
  27. width: 100%;
  28. height: 100%;
  29. }