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

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

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

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

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

Есть идеи?

1 Ответ

12 голосов
/ 06 марта 2012

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

.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/

...