diff --git a/css/index.css b/css/index.css index 8fc4b9d..de1ea7d 100644 --- a/css/index.css +++ b/css/index.css @@ -88,6 +88,7 @@ overflow: hidden; } +/* banner 轮播容器 */ .banner-cont .swiper-slide { position: relative; height: 650px; @@ -98,6 +99,12 @@ radial-gradient(ellipse at 80% 70%, rgba(56, 189, 248, 0.12) 0%, transparent 50%), linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0F172A 100%); overflow: hidden; + /* 背景图设置 */ + background-size: cover; + background-position: center center; + background-repeat: no-repeat; + /* 多重背景层叠:先渐变遮罩,再背景图 */ + background-blend-mode: normal, normal, normal; } /* 动态网格背景 */ @@ -108,12 +115,15 @@ left: 0; right: 0; bottom: 0; - background-image: + /* 添加深色遮罩,让文字更清晰 */ + background: + linear-gradient(90deg, rgba(15, 23, 42, 0.85) 0%, rgba(15, 23, 42, 0.5) 50%, rgba(15, 23, 42, 0.3) 100%), linear-gradient(rgba(56, 189, 248, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(56, 189, 248, 0.03) 1px, transparent 1px); - background-size: 50px 50px; + background-size: 100% 100%, 50px 50px, 50px 50px; animation: gridMove 20s linear infinite; pointer-events: none; + z-index: 1; } @keyframes gridMove { @@ -149,6 +159,7 @@ } } +/* 原 img 标签样式已废弃,现使用背景图 .banner-cont .swiper-slide .img { display: block; position: absolute; @@ -160,7 +171,6 @@ max-height: 85%; object-fit: contain; opacity: 0.95; - /* 移除 mix-blend-mode,让图片更清晰 */ filter: drop-shadow(0 20px 60px rgba(56, 189, 248, 0.3)); animation: floatImage 6s ease-in-out infinite; } @@ -173,8 +183,9 @@ transform: translateY(-50%) translateX(-20px); } } +*/ -/* 轮播文字层:左侧排列,为右侧图片留出空间 */ +/* 轮播文字层:左侧排列,z-index确保在遮罩之上 */ .banner-cont .swiper-slide .section-content { position: absolute; top: 50%; @@ -1377,9 +1388,11 @@ html { left: 5%; } + /* 已废弃:背景图不需要宽度设置 .banner-cont .swiper-slide .img { width: 50%; } + */ .banner-s .banner-list .banner-item { padding: 30px 40px; @@ -1418,20 +1431,13 @@ html { font-size: 15px; } - /* 平板尺寸下,图片改为背景,文字居中 */ - .banner-cont .swiper-slide .img { - width: 100%; - height: 100%; - opacity: 0.15; - filter: none; - object-fit: cover; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - transform: none; - animation: none; + /* 平板尺寸下,调整遮罩透明度,文字居中 */ + .banner-cont .swiper-slide::before { + background: + linear-gradient(rgba(15, 23, 42, 0.7) 0%, rgba(15, 23, 42, 0.7) 100%), + linear-gradient(rgba(56, 189, 248, 0.03) 1px, transparent 1px), + linear-gradient(90deg, rgba(56, 189, 248, 0.03) 1px, transparent 1px); + background-size: 100% 100%, 50px 50px, 50px 50px; } .banner-cont .swiper-slide .section-content { diff --git a/index.html b/index.html index 3ca2e29..807abd0 100644 --- a/index.html +++ b/index.html @@ -17,8 +17,7 @@