如何在两个单独的类中叠加两个图像？

Question

I have two classs: One:

  .ui-combobox-customclose {
      background: url('js/autocomplete/css/ui-lightness/images/close-button.gif') no-repeat right center;
      z-index: 105;
  }

and the other class(which is proving the background) is associated with an input box. How can I overlay this image( ui-combobox-customclose ) at the right side of that input box.

I am adding this class at run time. But that doesn't show the image.

If I specify the heigh and width and then .insertAfter the input. Then the image is coming. But that is breaking the whole organization.

I want to merge that image within the input box itself. That is why I need to overlay two images in two different css classes.

Answer 1

You can target one class and add two backgrounds making the top one a semi transparent png.

.backgroundMerge {
  background: url(one.jpg), url(two.jpg) no-repeat center;
}

Otherwise you would need to use canvas tag, and possibly export the combined images to a data-uri string and take that and attach it.

Edit: you can get and store the background by passing it like below, then add it with another background

var backgroundOne = $(".ui-combobox- customclose").css('background-image');     
$('element').css({ 'background' : backgroundOne + ', url(someotherimage) no-repeat'});