Question

我有一个通过背景图片格式化的文本框。现在，当发生一些AJAX处理时，我想在文本框的右下方显示一个旋转图标。当发生这种情况时，我可以将该类添加到文本框中，但它显然会替换背景。

.suburb-loading {
background: url('/images/loading_spinner.gif') right center no-repeat;
}

他们是否可以覆盖2个背景？或者在这里将图像叠加在背景上的最佳方法是什么？

Answer 1

使用CSS多个背景，只需用逗号分隔它们

.suburb-loading {
   background-image: url('1.png'), url('2.png');
   background-repeat: no-repeat, no-repeat;
}

Demo

小提琴CSS

input {
    background-image: url('http://www.melabev.org/images/spinner.gif?1331633304'), url('http://1-art.eu/images/backgrounds/vellum/vellum-old-vellum-background2.jpg');
    background-repeat: no-repeat, no-repeat;
    background-position: center right, 0 0;
    height: 35px;
}

Answer 2

您可以使用CSS3 Multiple Background功能，但是您应该知道这个will not work in all browsers，或者您可以创建覆盖原始div的另一个like with absolute position，这将是适用于那些不支持多种背景的旧浏览器

CSS文本框 - 将背景覆盖在另一个背景上

2 个答案: