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从左到右增长。而y从上到下逐渐减少。

有什么想法吗？

谢谢

Answer 1

根据我的理解，在CSS中，背景图像从左上角开始，0 0和x从左到右增长。而y从上到下逐渐减少。

但是，正确的是，您认为正在发生的事情实际上正在发生。

.gif和.png文件都支持名为透明度的内容，这基本上就是您的想法：您'透过'图像看到的颜色会落后于它。

PNG走得更远，因为你可以拥有partially transparent的东西，这会产生一种整洁的效果。 GIF只能是完全透明或不透明的。

Some browsers不喜欢与透明的png很好地合作，但是we don't care about that。

：d

CSS - 为什么图像在这个圆角设计中不与背景重叠？

1 个答案: