CSS - Почему изображение не перекрывает фон в этом дизайне закругленных углов?

Question

Я смотрю на панель навигации в Linkedin.

http://www.linkedin.com/

#nav-primary {
background:url("http://static02.linkedin.com/scds/common/u/img/sprite/sprite_global_v3.png") no-repeat scroll 0 -320px transparent;
}
#nav-primary .wrapper {
background:url("http://static02.linkedin.com/scds/common/u/img/sprite/sprite_global_v3.png") no-repeat scroll 0 -510px transparent;
        height:39px;
        padding:0 5px;
        }   

Фон # nav-primary контролирует верхнюю часть, которую я понимаю.Однако фон # nav-primary .wrapper контролирует нижнюю часть, я действительно потерял здесь.

Если вы внимательно посмотрите на фоновое изображение sprite_global_v3.png, в строке 510 нет цвета, просто прозрачныйцвет, как это может сделать отображение нижней границы затенения.

Насколько я понимаю, в CSS фоновое изображение начинается с верхнего левого угла с 0 0, а x увеличивается слева направо.в то время как у уменьшается сверху вниз.

Есть идеи?

Спасибо

Answer 1

Насколько я понимаю, в CSS фоновое изображение начинается с верхнего левого угла с 0 0, а x увеличивается слева направо.в то время как y уменьшается сверху вниз.

Правильно, однако, то, что вы думаете, происходит на самом деле.

.gif и .Оба файла png поддерживают что-то, что называется прозрачность , и это то, что вы думаете: вы просматриваете изображение, чтобы увидеть цвет, который будет за ним.

PNG идет еще дальше в том смысле, что у вас могут быть вещи частично прозрачные , что создает аккуратный эффект.GIF-файлы могут быть только полностью прозрачными или непрозрачными.

Некоторые браузеры не любят красиво работать с прозрачными pngs, но нам все равно об этом .

: D