Я работаю над сайтом 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="{"background_background":"classic","background_image":{"url":"","id":""}}" 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="{"slidesToShow":1,"autoplaySpeed":5000,"autoplay":true,"infinite":true,"pauseOnHover":true,"speed":500,"arrows":true,"dots":true,"rtl":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/ Я попытался продемонстрировать проблему - первый слайдер, который содержит только один слайд, работает нормально, но второй слайдер, который имеет несколько слайдов, не показывает фоновое изображение.
Как я могу исправить свой CSS?