0

.slider-conteiner {
    padding-left: var(--main-size);
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    display: grid;
}

.slider-img {
    height: 100%;
    width: 75%;
    overflow: hidden;
    position: absolute;
    float: left;
    display: block;
    grid-area: 1/1;
}

.slider-img::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(000, 000, 000, .45);
    z-index: 2;
}

.slider-img_slide {
    margin-left: 0;
    position: absolute;
    height: 100%;
    width: 100%;
}

.slider-img_bg {
    height: 100%;
    width: 100%;
    background-position: center;
    background-size: cover;
    display: flex;
}

.slider-text {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 100%;
    grid-area: 1/1;
    background: transparent;
}

.slider-text__slide {
    display: flex;
    justify-content: center;
    flex-direction: column;
}
 <div class="slider-conteiner">
                <div class="swiper slider-text">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide slider-text__slide">Slide 1</div>
                        <div class="swiper-slide slider-text__slide">Slide 2</div>
                    </div>
                </div>

                <div class="swiper slider-img">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide slider-img_slide">
                            <div class="slider-img_bg" style="background-image: url();"></div>
                        </div>
                        <div class="swiper-slide slider-img_slide" >
                            <div class="slider-img_bg" style="background-image: url();"></div>
                        </div>
                        <!-- <div class="swiper-slide slider-img_slide">Slaid 3</div> -->
                    </div>
                </div>
</div>

Есть родительский блок с двумя дочерними, в одном слайдер с фото, в другом слайдер с текстом, как сделать так чтоб блок с текстом был прозрачным и я мог видеть и то и то?

2
  • Пожалуйста, исправьте вопрос, чтобы он отражал конкретную проблему с достаточным количеством деталей для возможности дать адекватный ответ. 30 сен 2022 в 15:17
  • Вы хотите один элемент расположить поверх другого? Можете привести код вашего блока с дочерними элементами
    – SwaD
    30 сен 2022 в 15:20

2 ответа 2

1

Уточнение

Заголовок не совпадает с описанием и поэтому не совсем понятно что вы именно не можете, поэтому я отвечу на все понятные мне вопросы.

Ответ по заголовке

Вариант 1

Метод контроля дочерных элементов с помощью grid контейнера:

<div style="display: grid;">
  <div style="grid-area: 1 / 1;"> Child 1</div>
  <div style="grid-area: 1 / 1;"> 2nd child</div>
</div>

Вариант 2

Метод контроля дочерных элементов с помощью относительного позицирования:

<div style="position: relative">
  <div style="position: absolute; inset: 0;"> Child 1</div>
  <div style="position: absolute; inset: 0;"> 2nd child</div>
</div>

Ответ по описанию вопроса

По описанию вы не можете сделать фон элемента прозрачным, чтобы элемент сзади был виден:

div {
  background-color: red;
  font: 20px Consolas;
  font-weight: bold;
}
<div style="display: grid;">
  <div style="grid-area: 1 / 1;"> Child 1</div>
  <div style="grid-area: 1 / 1; background-color: transparent;"> 2nd child</div>
</div>

2
  • Спасибо за ответ, абсолютное позиционирование и так стоит, но не работает, а когда пишу с grid то он меняет размеры блоков
    – Mein_Kun
    1 окт 2022 в 17:11
  • 1
    @Денис У вас пример в вопросе не отображается.
    – eccs0103
    1 окт 2022 в 18:48
0

используйmix-blend-mode: multiply;на тексте

1
  • Немного не то что нужно, но спасибо за ответ. Я поработал с гридами и все вышло
    – Mein_Kun
    15 окт 2022 в 14:36

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.