Как обрабатывать "двойную непрозрачность" двух перекрывающихся divs

Ответ 1

РЕЗЮМЕ:

В зависимости от того, что необходимо, это может быть сложно, но базовый подход довольно прямолинейный.

Я написал здесь всю статью:

это может быть проще читать.

http://dream-world.us/2012/01/07/overlapping-transparent-divs-with-one-border/

Этот подход немного отличается от моей первой мысли... но это имеет тот же результат.

• Я сделал черный/прозрачный узор для круга и установил его :before.
• Затем круг преобразуется rotate(180deg) и перемещается в соответствии с угол <div>.
• Затем я установил opacity этого круга в 0.6.
• <div> не влияет на <div>.
• Затем я добавил элемент :after и поместил изображение как background (вы можете контролировать это через js, если необходимо)
• Я добавил некоторые эффекты к изображению (border-radius, box-shadow, border), чтобы показать, насколько легко и независимо этот элемент под контролем.
• Я использовал более светлый фон и установил opacity в 0.3, чтобы показать результат

ЗДЕСЬ FIDDLE: http://jsfiddle.net/pixelass/nPjQh/4/

Посмотрите на эту версию для некоторых безумных результатов: http://jsfiddle.net/pixelass/nPjQh/5/

В каждом из этих примеров используется только один элемент div

Основные правила. (эти правила "могут" использоваться для создания динамического поведения с помощью js)

position = absolute;

top = circleHeight/-2;

left = circleHeight/-2;//(left = top)

rotation = 180deg;

opacity = valueAofBackground;

bgColor = значениеRGBofBackground;

#inner {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    background-color: rgba(0, 0, 0, 0.3);
    padding:20px;
    border-radius: 20px;
    border-top-left-radius: 0;
}
#inner:before {
    content: "";
    background-image: -webkit-linear-gradient(transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0)),
        -webkit-linear-gradient(0deg, transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0));
    height: 40px;
    width: 40px;
    border-radius: 40px;
    position: absolute;
    top: -20px;
    left: -20px;
    -webkit-transform: rotateZ(180deg);
    opacity:0.3;
}
#inner:after {
    content: "";
    background: url('http://lorempixel.com/10/10/sports/1/') no-repeat;
    background-position:0;
    height: 10px;
    width: 10px;
    border-radius: 10px;
    position: absolute;
    top: -6px;
    left: -6px;
    -webkit-box-shadow: 0 0 10px rgb(255,255,255);
    border: 1px rgb(255,255,255) solid;

}

Лучшее объяснение

Оригинальная версия комментария http://jsfiddle.net/pixelass/nPjQh/10/

см. комментарии в коде ниже

#inner {
background: rgba(0,0,0,0.5) /*this is the full color-code of the div (with alpha)*/
}
#inner:before {
    /*the solid color of the circle = rgbValue of the div*/
    background-image: -webkit-linear-gradient(transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0)),
        -webkit-linear-gradient(0deg, transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0));
    /*opacity of the circle = alpha of the div*/
    opacity: 0.5;
}

Этот пример имеет полный прозрачный div... круг - это "pacman" - форма: http://jsfiddle.net/pixelass/nPjQh/14/

Управление смещением круга

Посмотрите на эти примеры, которые обрабатывают смещение круга (НЕ ИСПОЛЬЗОВАНИЕ PSEUDEO-ELEMENTS)

1:1 копия кода OP (смещение 15px): http://jsfiddle.net/pixelass/nPjQh/12/

С большим меньшим смещением (5px): http://jsfiddle.net/pixelass/nPjQh/13/

(содержимое имеет ту же непрозрачность, что и круг)

Как работает смещение?

Управляйте background-size по сравнению с top и left

Правила

top = left;

background-size = elementHeight * 2 + top * 2;

Посмотрите на цветок (это также только один <div> с псевдоэлементами) background-size больше круга. который создает зеленые листья на дне

http://jsfiddle.net/pixelass/nPjQh/15/

ТЕКУЩАЯ ПРОБЛЕМА

Смотрите эту скрипту: http://jsfiddle.net/pixelass/nPjQh/16/

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

КАК РЕШИТЬ ЭТУ ПРОБЛЕМУ

Если вам нужен холст или другой div внутри круга, вам нужно будет поместить круг на div и слой в необходимый div по кругу

Смотрите эту скрипту: http://jsfiddle.net/pixelass/nPjQh/17/

немного изменитесь, и он будет работать нормально. Получите код из FIDDLE

Различные формы/расширенный стиль

Если вы используете другую фигуру с плоскими сторонами, вы можете даже поместить границу вокруг суммы двух div.. или даже добавить тень окна

все еще использует простую разметку....

<div id="foo">
    <div id="bar">
    </div>
</div>

См. скрипт для тени окна: http://jsfiddle.net/pixelass/nPjQh/21/

Применить границу к кругу

Используя -webkit-mask-image, мы можем добавить границу к кругу. http://jsfiddle.net/pixelass/nPjQh/24/

Дополнительные примеры:

Четыре круга вокруг div

http://jsfiddle.net/pixelass/nPjQh/25/

Разметка:

<div id="foo">
    <div id="bar1"></div>
    <div id="bar2"></div>
    <div id="bar3"></div>
    <div id="bar4"></div>
</div>

Используя этот метод для создания всплывающей подсказки

http://jsfiddle.net/pixelass/nPjQh/31/

Разметка:

<div id="foo">
    <div id="bar"></div>
    I am a pure css tooltip with a semi-transparent background and a black border. <br/>
    My width is static an my height is dynamic...
</div>

Ответ 2

Я думаю, что единственным способом было бы сделать непрозрачность отдельно,

например. http://dabblet.com/gist/1566278

Ответ 3

Пересмотренный ответ

Эта скрипта совместима с IE9 и разрешает дублирование фона, необходимое в моем первоначальном ответе. Он использует псевдоэлементы для генерации круга. Это решение отталкивает идею пикселя "pacman", но вместо использования нового градиента css для генерации, он использует более старые (и мало используемые или понятные) clip, чтобы сделать круг в двух частях. Это решило вопрос о том, что ваш круг не "центрирован" на углу.

#foo {
    height:150px;
    width:250px;
    background: rgba(0, 0, 0, 0.6);
    position:absolute;
    left:40%;
    top:20%;
}

#bar {
    height:40px;
    width:40px;
    position:absolute;
    top:-15px;
    left:-15px;
    line-height: 40px;
}

#bar:before,
#bar:after {
    content: '';
    display: block;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 40px;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
}

#bar:before {
    clip: rect(0 40px 15px 0);
}

#bar:after {
    clip: rect(15px 15px 40px 0);
}

Оригинальный ответ

Вы можете сделать это (см. скрипку). Он подталкивает круг ниже и "накладывает" часть, которая перекрывается с псевдоэлементом, чтобы восстановить фоновый цвет тела:

body{background:green;}

#foo{
height:150px;
width:250px;
background:rgba(0, 0, 0, 0.6);
position:absolute;
left:40%;
top:20%;
}

#bar{
height:40px;
width:40px;
background:rgba(0, 0, 0, 0.6);
border-radius:40px;
position:absolute;
top:-15px;
left:-15px;
z-index: -1;
}

#bar:after {
    content: '';
    display: block;
    background: green;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 25px;
    height: 25px;
}

Ответ 4

Как насчет этого: http://jsfiddle.net/rudiedirkx/TqRCw/

(Редактор Dabble отстой!)

Это невозможно сделать только с псевдоэлементами sadly = (

Это можно сделать только с псевдоэлементами! См. ответ пикселя. Однако CSS3 является обязательным требованием.