css同时设置多个背景 背景图片显示的先后顺序问题

css 的background 可以设置多个背景图片:

下面这个类名为 abc 的样式设置了两个背景图片,分别为:test.png 和 test2.jpg ,也就是说需要设置多少个

背景图片,就设置几个 url 就可以了;

.abc{

width: 300px;

height: 300px;

border: 1px solid red;

background:url( test1.png ) no-repeat,

                    url( test2.jpg ) no-repeat;

}

 

然后需要注意的就是背景图片的显示的顺序的问题,

上面的例子中先设置的背景图片是 test1.png ,那么可以假设test1.png的层级是 1,

那么后设置的背景图片 test2.jpg 的层级就可以是 2,也就是后面设置的背景会遮住前面设置的背景;


版权声明:本文为cvper原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。