[分享]css两个背景图片

CSS是一种用于控制网页外观的语言，其中背景图片是很常见的样式之一。通常情况下，我们可以使用一个背景图片，但是有时候我们需要在一个元素上使用两个不同的背景图片。 使用CSS时，我们可以使用"...

CSS是一种用于控制网页外观的语言，其中背景图片是很常见的样式之一。通常情况下，我们可以使用一个背景图片，但是有时候我们需要在一个元素上使用两个不同的背景图片。 使用CSS时，我们可以使用"background"属性来定义元素的背景样式，包括颜色、图片、重复方式和位置等。下面是一个示例代码，它用于设置一个元素的背景为两个不同的图片：

.my-element {
    background-image: url("image1.png"), url("image2.png");
    background-position: top left, bottom right;
    background-repeat: no-repeat, repeat-x;
} 

在上面的代码中，我们使用了"background-image"属性来指定两个背景图片，分别是"image1.png"和"image2.png"。每个图片之间使用逗号分隔，表示这两个图片都是该元素的背景。 接着，我们使用"background-position"属性指定每个背景图片的位置，这里是分别在左上角和右下角。“top left”表示第一个图片在元素的左上角，"bottom right"表示第二个图片在元素的右下角。 最后，我们使用"background-repeat"属性来指定每个背景图片的重复方式。"no-repeat"表示不重复，"repeat-x"表示水平方向重复。这里我们将第一个图片设置为不重复，第二个图片设置为水平方向重复。 总的来说，使用这种方式可以让我们将多个背景图片叠加在一起，从而实现更加丰富的页面效果。需要注意的是，在使用多个背景图片时，要注意图片的大小和排列顺序，以免影响页面的展示效果。