我對XLOG的美化方案

紫红色照片 UI 作品演示文稿

先上效果圖#

想法#

在做 XLog 的美化之前，我已經看到過許多的博主發表過自己的 xLog CSS，但是我感覺還是原本的更加純粹，只要在加一個虛化背景，那就是太完美了。

css 文件#

.swiper-button {
    position: absolute;
    top: 50%;
    z-index: 1;
    height: 1.5rem;
    width: 1.5rem;
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    justify-content: center;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: #00000030;
    opacity: .8;
}
    .header {
      height: 20vh; /* 設置高度為視口高度的 30% */
      background-image: url("https://vpic2024.xingluo.eu.org/uploads/picgo/202402282219442.webp"); /* 替換為你的背景圖路徑 */
      filter: blur(60px);
      background-size: cover; /* 背景圖等比例縮放以填滿容器 */
      background-position: center; /* 將背景圖居中 */
    }

.dark .xlog-banner {
    background-image: url(https://vpic2024.xingluo.eu.org/uploads/picgo/202402282219442.webp);
    filter: blur(123px);
}

.xlog-banner {
    background-image: url(https://vpic2024.xingluo.eu.org/uploads/picgo/202402260904562.jpeg);
    filter: blur(98px);
}

此文由 Mix Space 同步更新至 xLog
原始鏈接為 http://mixspace.en.icu/posts/default/221