Блог

Главная - Вопросы по программированию - Установить два изображения в одно фоновое изображение с хорошим выравниванием?

Установить два изображения в одно фоновое изображение с хорошим выравниванием?

#html #css

#HTML #css

Вопрос:

Как установить два изображения в одном фоновом изображении? У меня есть две картинки, но есть проблема с разделением этих двух (одна накладывается на другую).

Ниже приведен мой стиль для этого div.

 .layout_core_menu_logo {
    padding: 20px 0 0px 0;
    background: url(~/application/xxx.gif) transparent no-repeat top;
    background-size: 968px 200px;
    a { 
        background: url("/application/xx1.gif?c=573") no-repeat,url("/application/themes/xx2.gif")no-repeat;
        width:1160px;
        height: 187px;
        display: block;
        text-indent: -9999px;
        position: relative; top: 20px; left: 0px;    
    }
}

Комментарии:

1. исправьте макет, его трудно читать

2. также вы пытались использовать background-position?

3. a { background: url(«/application/themes/epatients/images/coa/title_ortho.gif?c = 573») без повтора,url(«/application/themes/epatients/images/coa/title_ca.gif «) без повтора; ширина: 1160 пикселей; высота: 187 пикселей; отображение: блок; отступ текста: -9999px; позиция: относительная; вверху: 20 пикселей; слева: 0 пикселей; } проблема с этой частью

4. очевидно, проблема …. вы закрываете скобку .layout_core_menu_logo после того, как вы ее закроете a . Почему бы вам не разделить их?

5. спасибо за быстрый ответ, я сделал это со следующей коррекцией в моем коде ..!

Ответ №1:

Вам нужно указать положение и размер фона каждого изображения.

  .layout_core_menu_logo {
   padding: 20px 0 0px 0;
   background: url(http://www.mvploops.com/files/_willow/categories/281_Sample-    Packs.jpg) transparent no-repeat top;
   background-size:100% 100%; 
  }
  a { 
    background: url("http://www.detailinggurus.com/images/sample_bottles.jpg") no-repeat top left,url("http://www.mclub.com.ua/images/alb/cover42163_148565.jpg")no-repeat top right;
    background-size:50% 100%, 50% 100%;
    width:968px;
    height: 187px;
    display: block;
    text-indent: -9999px;
    position: relative; top: 20px; left: 0px;    
 }

Пример скрипки

Ответ №2:

  <style>
   a { 
       background:url("/application/xx1.gif?c=573amp;c=573") no-repeat scroll 51% 60%, 
       url("/application/xx2.gif?c=573") no-repeat scroll 0% 20% transparent ;
   }
<style>