как обрабатывать «двойную непрозрачность» двух перекрывающихся div - PullRequest
Новая
       22

как обрабатывать «двойную непрозрачность» двух перекрывающихся div

29 голосов
/ 05 января 2012

У меня есть два деления, оба с непрозрачностью 0,6.Мне нужно, чтобы они перекрывались, но сохраняли непрозрачность, а не создавали новый комбинированный уровень непрозрачности.Я не могу использовать изображение.

РЕДАКТИРОВАТЬ - Предполагается, что маленький кружок имеет элемент холста.Не уверен, что псевдоэлементы были бы лучшим решением.

Есть ли в любом случае сделать это с помощью CSS, или я должен просто использовать canvas?

пример -

http://dabblet.com/gist/1566209

HTML: 

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

CSS: 

/**
 * Double Opacity
 */
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;
}

Ответы [ 5 ]

39 голосов
/ 05 января 2012

РЕЗЮМЕ:

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

Я написал целую статью об этом здесь:

это может быть легче читать.

http://dream -world.us / 2012/01/07 / перекрывающихся прозрачный-дивы-с одной границы /

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

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

ЗДЕСЬ СКИДКА: http://jsfiddle.net/pixelass/nPjQh/4/

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

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

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

позиция = абсолютная;

top = circleHeight / -2;

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

вращение = 180 градусов;

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/

pacman shaped circle

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

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

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

С намного меньшим смещением (5 пикселей): http://jsfiddle.net/pixelass/nPjQh/13/

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

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

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

Правила

сверху = слева;

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

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

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

one div makes a flower

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

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

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

conent is transparent

КАК РЕШИТЬ ЭТОТ ВЫПУСК

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

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

измените немного, и все будет работать нормально. ПОЛУЧИТЕ КОД ИЗ НЕЙТРА

correcting the opacity issue

Различные формы / продвинутый стиль

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

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

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

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

adding a box-shadow

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

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

border on round element

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

Четыре круга вокруг 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>

4 circles

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

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>

css tooltip

10 голосов
/ 05 января 2012

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

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

2 голосов
/ 06 января 2012

Исправленный ответ

Эта скрипка совместима с IE9 и разрешает дублирование фона, необходимое в моеморигинальный ответ.Он использует псевдоэлементы для создания круга.Это решение развивает идею Pixelass "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;
}
2 голосов
/ 05 января 2012

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

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

К сожалению, это невозможно сделать только с помощью псевдоэлементов = (

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

0 голосов
/ 18 апреля 2018

Я создал Q / A для обработки этого сценария вместе с «зависанием» таких перекрывающихся элементов.

Перекрывающиеся элементы с непрозрачностью и обработкой парения на этих .

Решение в основном состоит в том, чтобы установить непрозрачность на родительском уровне вместо непосредственно на дочерних элементах и ​​переключать их при наведении курсора с помощью JS.

HTML 

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

JS 

$(".first, .second").hover(function() {
  $(".wrapper, .first, .second").not(this).toggleClass("add-opacity");
});

CODEPEN

Надеюсь, это поможет.

...