css box shadow + прозрачные фоновые изображения = интуитивная разбивка

  • У меня есть изображение кнопки, которое я использую в качестве фонового изображения для некоторых ссылок.
  • Фоновое изображение имеет закругленные углы.
  • Я хочу использовать тень css вместо того, чтобы помещать тень на изображение.

Проблема в том, что тень кажется нарисованной вокруг элемента. Хотя я ожидал увидеть цвет тени через прозрачные части фонового изображения, вместо этого я вижу цвет фона (см. этот jsfiddle).

Моя реальная цель немного сложнее, но если я смогу выполнить свои первые три пункта, я смогу справиться с этой задачей. В частности, я хочу использовать два вложенных элемента с фоновыми изображениями правой и левой частей изображения кнопки (закругленные углы), чтобы я мог использовать один и тот же css для обертывания «кнопки» вокруг текста любой длины. Поскольку фоны перекрываются в стиле css «раздвижные двери», альфа-тень png показывает 2-кратный темный участок, где изображения перекрываются. Итак... Я думал, что буду использовать тень css, но, как вы можете видеть в jsFiddle, с этим тоже есть проблемы.

Любые идеи?


css background-image transparency
person doub1ejack    schedule 05.03.2012    source источник

Ответы (1)


arrow_upward
13
arrow_downward

Бокс-тени не видны через прозрачный фон. Более простой тестовый пример:

.box {
  width: 100px;
  height: 100px;
  margin: 20px;
  background-color: transparent;
  box-shadow: 0 0 10px #000;
}​

Ожидаемый результат будет красивым размытым черным квадратом, верно? Ну... нет, это белый квадрат с тенью. http://jsfiddle.net/UjhrW/

Чтобы достичь того, что вы хотите сделать, вам понадобится отдельная разметка для тени, залейте ее белым цветом, а затем установите разлив тени, чтобы она выглядела как размытый квадрат...

.box {
  width: 100px;
  height: 100px;
  margin: 20px;
  background-color: #000;
  box-shadow: 0 0 10px 6px #000;
}​

http://jsfiddle.net/Etmty/

.box {
  width: 100px;
  height: 100px;
  margin: 20px;
  background-color: #000;
  box-shadow: 0 0 10px 6px #000;
}
<div class="box"></div>

person methodofaction    schedule 05.03.2012
comment
Хорошо, это создает впечатление красивой тени. Вы рекомендуете мне затем расположить фоновые изображения, которые я хочу, поверх div .box? Вроде должно работать.. - person doub1ejack; 06.03.2012
comment
На самом деле, это неплохо: jsfiddle.net/doub1ejack/AAAMH. Я уже решил эту проблему, очень тщательно подобрав размер моего div с тенью блока, чтобы он был того же размера и формы, что и фоновое изображение, но это кажется немного хрупким. Мне так больше нравится, спасибо. - person doub1ejack; 06.03.2012
comment
Зачем вам нужен отдельный div? Просто добавьте тень к содержащему div. - jsfiddle.net/NotInUse/AAAMH/2, если я что-то не упустил, вы' у нас больше кода, чем нужно. - person Scott; 06.03.2012
comment
Согласно оригинальному jsfiddle jsfiddle.net/doub1ejack/cXKTx, div должен быть немного больше фона. изображение. - person methodofaction; 06.03.2012
comment
@scott: проблема с добавлением тени к содержащему div заключается в том, что тень css не отображается через какие-либо прозрачные части фонового изображения. Поэтому, если у вас есть изображение с прозрачным отверстием посередине, вы видите цвет родительского фона, а не цвет тени. Мозгу больно.. - person doub1ejack; 09.03.2012