74 lines
2.0 KiB
CSS
74 lines
2.0 KiB
CSS
/* 1. 强制清空外层所有可能的背景、边框和阴影 */
|
|
#swiperBox,
|
|
#swiper_container,
|
|
.blog-slider,
|
|
.swiper-container {
|
|
padding: 0 !important;
|
|
margin: 0 auto !important;
|
|
background: none !important; /* 彻底删掉白色底色 */
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
width: 100% !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
/* 2. 针对容器下方的白边进行“零间距”处理 */
|
|
div#swiperBox {
|
|
margin-bottom: 20px !important; /* 只保留外部下边距，内部不留白 */
|
|
}
|
|
|
|
div#swiper_container {
|
|
height: 250px !important;
|
|
display: block !important;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
/* 3. 彻底隐藏那个奇怪的橙色方块 */
|
|
/* 那个方块通常是 swiper-pagination-bullet-active 或导航按钮的背景 */
|
|
.blog-slider__pagination .swiper-pagination-bullet,
|
|
.swiper-pagination-bullet,
|
|
.swiper-button-next,
|
|
.swiper-button-prev {
|
|
outline: none !important;
|
|
}
|
|
|
|
/* 如果你不需要底部的圆点，直接用下面这行彻底删掉它 */
|
|
.blog-slider__pagination, .swiper-pagination {
|
|
display: none !important;
|
|
}
|
|
|
|
/* 4. 修复图片和内容的覆盖，确保不露底色 */
|
|
.blog-slider__item {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
background-size: cover !important;
|
|
background-position: center !important;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
/* 5. 修正文字布局，防止重叠 */
|
|
.blog-slider__content {
|
|
background: rgba(0, 0, 0, 0.45); /* 黑色半透明遮罩 */
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
padding: 0 40px !important;
|
|
display: flex !important;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
a.blog-slider__title {
|
|
font-size: 1.5rem !important;
|
|
color: #fff !important;
|
|
margin: 5px 0 !important;
|
|
display: block !important;
|
|
}
|
|
|
|
/* 6. 解决左右箭头样式异常 */
|
|
.swiper-button-next::after, .swiper-button-prev::after {
|
|
font-size: 1.2rem !important;
|
|
color: #fff !important;
|
|
background: none !important; /* 彻底去掉背景色 */
|
|
} |