css两张背景图片叠加只出现一张

CSS中有时候需要把两张背景图片叠加起来，但是却只想让其中一张图片显示出来。这种需求在实际开发中经常会遇到，本文介绍如何通过CSS实现这种效果。

background-image: url("first-background-image.jpg"), url("second-background-image.jpg");
background-position: center, center;
background-repeat: no-repeat, no-repeat;
background-size: cover; 

以上代码中，我们在background-image属性中同时引入了两张背景图片，分别是“first-background-image.jpg”和“second-background-image.jpg”。接下来，我们需要设置这两张图片的显示位置和重复方式。这里我们需要设置这两个属性两次，分别对应着不同的背景图片。

background-position: center, center;
background-repeat: no-repeat, no-repeat; 

代码中，我们设置了背景图片的位置为中心，重复方式为不重复的样式。这样就可以完成将两张背景图片叠加的效果。然而，在实际的开发过程中，我们只希望显示其中的一张背景图片，这时候就需要设置优先级，让其中一张背景图片覆盖另一张图片。

background-image: url("first-background-image.jpg"), url("second-background-image.jpg");
background-position: center, center;
background-repeat: no-repeat, no-repeat;
background-size: cover;
z-index: 1; 

通过z-index属性设置优先级，可以指定哪一个背景图片应该在另一个图片之上显示。以上面的代码为例，我们设置了z-index的值为1，表示第一张背景图片优先于第二张背景图片进行显示。如果需要显示第二张背景图片，只需要将z-index的值改为2即可。