时间戳

首页 > 解决方案 > 反应轮播预览

javascript - 反应轮播预览

问题描述

如何确保背景图片覆盖整个页面 在此处输入图像描述

代码

const settings = {
    showArrows: false,
    swipeable: true,
    stopOnHover: true,
    autoPlay: true,
    infiniteLoop: true,
    transitionTime: 1000,
    showIndicators: false,
    useKeyboardArrows: true,
    emulateTouch: true,
    showThumbs: false,
}

return (

    
    <Carousel  {...settings}>
        <div className="about-banner-one">
            <div className="about-banner-content">
                <img className="about-image" alt="" src={image1}/>
                    
            </div>
             ...
        </div>

    </Carousel>

的CSS

.about-image{
    width: 100vw !important;
    height: 60vh !important;
}
.about-banner-one{
    padding: 0;
    height: 60vh;
    /* background-image: linear-gradient(to right, rgba(0, 0, 0, 0.955), rgba(0, 0, 0, 0.784)), url(../../../assets/cargoplane\ 2.jpg); */
    background-attachment: fixed;
    background-size: cover;
    background-position: bottom;
    position: relative;
    bottom: 20px;
    width: 100vw;
}
...

我曾尝试将 div 的背景图像（解释不同的 div 名称）放在 css 中，但图像不会显示。如何摆脱以前突出显示的图像？

我如何进行过渡？

标签： javascriptcssreactjsjsxcarousel

解决方案

推荐阅读