4

Имеются два блока, один внутри другого.

.first {
  width: 100px;
  height: 100px;
  background-color: rgba(255,0,0,0.5)
}

.second {
  width: 75px;
  height: 75px;
  background-color: rgba(0,0,255,0.5)
}
<div class="first">
  <div class="second"></div>
</div>

Есть ли возможность убрать эффект наложения цветов или ограничить фон внешнего элемента границами внутреннего?

Например прозрачное модальное окно. Фон затенения подмешивается к фону самого окна. При этом само окно может содержать в себе другие блоки, которым тоже хотелось бы задать прозрачный фон другого цвета.

2
  • Что значит эффект наложения?
    – Yuri
    15 мар 2017 в 21:32
  • Смешивания иначе говоря.
    – ldp.n
    15 мар 2017 в 21:42

1 ответ 1

1

Опишите задачу подробнее. Пока могу предложить вам несколько обходных путей, исходя из предоставленного примера:

  • убрать большой блок, а вместо него добавить два маленьких блока, формирующих выступающую часть

  • использовать результирующие цвета после применения прозрачности и задавать их, отключив прозрачность. Достаточно сделать это только для маленького блока

  • и третий, самый удачный, на мой взгляд. Под маленький блок сделать белую подложку

Если вы больше раскажете о проблеме, то можно будет поискать более элегантные решения

.first {
  width: 100px;
  height: 100px;
  background-color: rgba(255,0,0,0.5)
}

.second {
  width: 75px;
  height: 75px;
  background-color: rgba(0,0,255,0.5)
}

.option_one {
    margin-bottom: 50px;
    width: 75px;
    height: 75px;
    background-color: rgba(0,0,255,0.5);
    position:relative;
}
.option_one div {
    background-color: rgba(255,0,0,0.5);
}
.helper_a {
    position:absolute;
    width:25px;
    height:100px;
    left:75px;
    top:0;
}
.helper_b {
    top:75px;
    height:25px;
    width:75px;
    left:0;
    position:absolute;
}

.option_two, .option_three {
    margin-bottom: 25px;
    width:100px;
    height:100px;
    background-color: rgba(255, 0, 0, 0.5);
}
.option_two div {
    background-color: rgb(128, 128, 255);
    width:75px;
    height:75px;
}

.white, .color {
    width:75px;
    height:75px;
}

.white {
    background-color:#fff;
}
.color {
    background-color:rgba(0,0,255,0.5);
}
<div class="option_one">
    <div class="helper_a"></div>
    <div class="helper_b"></div>
</div>

<div class="option_two">
    <div></div>
</div>

<div class="option_three">
    <div class="white">
        <div class="color"></div>
    </div>
</div>

<div class="first">
  <div class="second"></div>
</div>

1
  • Например прозрачное модальное окно. Фон затенения подмешивается к фону самого окна. При этом само окно может содержать в себе другие блоки, которым тоже хотелось бы задать прозрачный фон другого цвета.
    – ldp.n
    16 мар 2017 в 1:02

Ваш ответ

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

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