Question

我正在一个Wordpress网站上工作，并且试图创建一个包含3个不同幻灯片的滑块。每张幻灯片都有不同的固定背景和渐变背景覆盖。我创建的CSS适用于第一张幻灯片，但是当我尝试添加更多幻灯片时，背景图像消失了。我的CSS有点不对劲，我也不明白。

这是相关的CSS：

.elementor-element .slick-slide-bg{
background-position:center 35%;
background-attachment: fixed;
}


.elementor-1063 .elementor-element.elementor-element-da9971b .elementor-repeater-item-64b2c21 .slick-slide-inner .elementor-background-overlay
{
background: linear-gradient(rgba(0, 0, 0, 1), #fff);
    opacity: 0.4; 

}

这是相关的源代码：

<body data-rsssl=1 class="page-template page-template-elementor_canvas page page-id-1063 logged-in admin-bar no-customize-support wp-custom-logo no-isotope no-lightbox no-fitvids no-scroll-top no-sidr no-carousel no-matchheight woocommerce-no-js oceanwp-theme dropdown-mobile no-header-border default-breakpoint content-full-width content-max-width page-with-background-title page-header-disabled has-breadcrumbs pagination-center has-grid-list account-original-style elementor-default elementor-template-canvas elementor-page elementor-page-1063">
            <div class="elementor elementor-1063">
            <div class="elementor-inner">
                <div class="elementor-section-wrap">
                            <section data-id="6e189a2" class="elementor-element elementor-element-6e189a2 elementor-section-full_width elementor-section-height-default elementor-section-height-default elementor-section elementor-top-section" data-settings="{&quot;background_background&quot;:&quot;classic&quot;,&quot;background_image&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;}}" data-element_type="section">
                        <div class="elementor-container elementor-column-gap-no">
                <div class="elementor-row">
                <div data-id="af8cf2b" class="elementor-element elementor-element-af8cf2b elementor-column elementor-col-100 elementor-top-column" data-element_type="column">
            <div class="elementor-column-wrap elementor-element-populated">
                    <div class="elementor-widget-wrap">
                <div data-id="da9971b" class="elementor-element elementor-element-da9971b elementor--h-position-center elementor--v-position-middle elementor-widget elementor-widget-slides" data-element_type="slides.default">
                <div class="elementor-widget-container">
                    <div class="elementor-slides-wrapper elementor-slick-slider" dir="ltr">
            <div class="elementor-slides slick-arrows-inside slick-dots-inside" data-slider_options="{&quot;slidesToShow&quot;:1,&quot;autoplaySpeed&quot;:5000,&quot;autoplay&quot;:true,&quot;infinite&quot;:true,&quot;pauseOnHover&quot;:true,&quot;speed&quot;:500,&quot;arrows&quot;:true,&quot;dots&quot;:true,&quot;rtl&quot;:false}" data-animation="fadeInUp">
                <div class="elementor-repeater-item-64b2c21 slick-slide"><div class="slick-slide-bg"></div><div  class="slick-slide-inner"><div class="elementor-background-overlay"></div><div class="elementor-slide-content"><div class="elementor-slide-heading"><font dir="rtl">מבזבזים זמן עבודה יקר על<font color="#ed6524"> תקלות טכניות?</font></font></div><div class="elementor-slide-description">  <span class="scroll-btn">
    <a href="#">
        <span class="mouse">
            <span>
            </span>
        </span>
    </a>

</span>

您也可以在这里查看网站：https://www.naotech.com/video-conference/我试图演示这个问题-仅包含一个幻灯片的第一个滑块可以正常工作，但是具有多个幻灯片的第二个滑块不显示背景图像。 / p>

如何修复CSS？

背景：附件在我的滑块上无法正常工作

0 个答案: