Наложение элементов с прозрачным фоном

#html #css #background

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



.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)
}

  






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

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

Ответы

Ответ 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);
}