В моем случае проблема была в конфигурации времени выполнения сервера:
Проверьте, что JRE - это необходимая версия:
Проект был в версии 1.7, а сервер JRE был установлен как 1.6, после того, как он перешел к правильной версии Java, которую он начал нормально.
РЕЗЮМЕ:
В зависимости от того, что необходимо, это может быть сложно, но базовый подход довольно прямолинейный.
I написал всю статью об этом здесь:
было бы легче читать.
http://dream-world.us/2012/01/07/overlapping- transparent-divs-with-one-border /
Этот подход немного отличается от моей первой мысли ... но это имеет тот же результат.
:before
. rotate(180deg)
и перемещается в соответствии с углом <div>
. opacity
этой окружности на 0.6
. <div>
не влияет opacity
. :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 = значениеAofBackground;
bgColor = valueRGBofBackground;
#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 /
[/g14]
Управление смещением круга
Посмотрите на эти примеры которые обрабатывают смещение круга (НЕ ИСПОЛЬЗУЮЩИЕ ПСЕВДО-ЭЛЕМЕНТЫ)
Копия кода OP (с коррекцией 15 пикселей): 1: 1: http://jsfiddle.net/pixelass/nPjQh/12 /
С намного меньшим смещением (5px): http://jsfiddle.net/pixelass/nPjQh/13/
( содержимое имеет ту же непрозрачность, что и круг)
Как работает смещение?
Управлять background-size
по сравнению с top
и left
Правила:
t op = left;
background-size = elementHeight * 2 + top * 2;
Посмотрите на цветок (это также только один <div>
с псевдоэлементами) [background-size
больше круга. который создает зеленые листья на дне
http://jsfiddle.net/pixelass/nPjQh/15/
[/g15]
ТЕКУЩАЯ ПРОБЛЕМА
См. эту скрипту: http://jsfiddle.net/pixelass/nPjQh/16/
Если не использовать другой слой, как показано в примерах в верхней части сообщения, контент будет прозрачным. Поэтому, если вам нужно только изображение внутри круга, приведенные выше примеры будут работать нормально.
[/g16]
КАК РЕШИТЬ ЭТУ ПРОБЛЕМУ
Если вам нужен холст или другой div внутри круга, вам нужно будет поставить круг на div и слоем нужный div по кругу
См. эту скрипту: http://jsfiddle.net/pixelass/nPjQh/17/
немного изменится, и он будет работать нормально. ПОЛУЧИТЕ КОД ИЗ FIDDLE
[/g17]
Различные формы / расширенные стили
Если вы используете другой форма с плоскими сторонами, вы даже можете поместить границу вокруг суммы двух div .. или даже добавить тень окна
, все еще используя простую разметку ....
<div id="foo">
<div id="bar">
</div>
</div>
См. скрипку для теневого окна: http://jsfiddle.net/pixelass/nPjQh/21/
[/g18]
Применить границу к кругу
Используя -webkit-mask-image
, мы могли бы добавить границу к кругу. http://jsfiddle.net/pixelass/nPjQh/24/
[/g19]
Дополнительные примеры:
Четыре круга вокруг 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>
[/g20]
Используя эту технику для создания всплывающей подсказки
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>
[/g21]
Я думаю, что единственным способом было бы сделать непрозрачность отдельно,
, например. http://dabblet.com/gist/1566278
Я создал Q / A для обработки этого сценария наряду с «зависанием» таких перекрывающихся элементов.
Перекрытые элементы с непрозрачностью и обработка «зависания» на этих .
Решение состоит в том, чтобы установить непрозрачность на родительском уровне непосредственно на дочерние элементы и переключить их во время наведения с помощью JS.
<div class="wrapper">
<div class="first"></div>
<div class="second"></div>
</div>
$(".first, .second").hover(function() {
$(".wrapper, .first, .second").not(this).toggleClass("add-opacity");
});
Надеюсь, это поможет.
Как насчет этого: http://jsfiddle.net/rudiedirkx/TqRCw/
(редактор Dabble всасывает !!) [/ g2]
Он может " t можно сделать только с псевдоэлементами sadly = (
Это можно сделать только с псевдоэлементами! См. ответ пикселяссы. Однако CSS3 - это требование.
Пересмотренный ответ
Этот скрипт совместим с с IE9 и разрешает дублирование фона, необходимое в моем первоначальном ответе. Он использует псевдоэлементы для генерации круга. Это решение отталкивает идею пикселя «pacman», но вместо использования нового генерации градиента фона для генерации используется более старый (и мало используемый или понятный ) 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;
}
opacity
! Пропустил это =) Я смею сказать, что это блестяще. Как этот ответ имеет только 2 оборота? Твои сумасшедшие примеры потрясающие! Я полностью использую это где-то. – Rudie 6 January 2012 в 22:44