Управление каждым свойством стиля для каждого фонового изображения одного div

У меня есть DIV, что я хочу дать ему 2 или более фоновых изображения. Я установил стиль в DIV класс с двумя изображениями:Управление каждым свойством стиля для каждого фонового изображения одного div

.manyImages { 
    background: url(/a1.png), url(/a2.png) no-repeat; 
} 

<div class="manyImages"> </div>

Моя проблема установить различный размер фона для каждого URL изображения. Как я могу контролировать каждое изображение многих изображений backgroud на одном DIV для установки размера, границ, цвета ...?

EDIT: Я хочу, чтобы контролировать каждый размер изображения внутри DIV, для фона пример первого изображения должен быть 20px X 20px второе изображение 40px X 45px и так далее ...

источник

2013-12-01 Dima

это фон-размер: 20px 20px, 45px 40px; я уже ответил, а также добавил пример. – cocco

Стенограмма: цветное изображение positionY positionY repeat;

background: 
url(/a1.png) center center no-repeat, 
url(/a2.png) left top no-repeat; 
//then 

background-size:cover,auto; 
//cover,contain,%,px...

Вы не можете добавить границы к фоновым изображениям.

это также трудно сохранить пропорции, если вы не используете cover или contain

только в хроме можно также добавить сокращенное право фона-размера после повторного тега, добавив / ..так

background:color url posx posy repeat/sizex sizey

пример

http://jsfiddle.net/At7g4/1/

EDIT

как установить пользовательские фоновые размеры:

background:url(a.jpg) 0px 0px no-repeat,url(b.jpg) 20px 0px no-repeat,url(c.jpg) 70px 0px no-repeat; 
background-size:20px 20px,45px 40px,50px 50px;

пример

http://jsfiddle.net/At7g4/2/

источник

2013-12-01 12:05:09 cocco

Ohoo, поэтому вы просто устанавливаете размер для всей группы 'background-size: 1px 1px, 2px 2px, 3px 3px;' nice. Если я сделаю это, как этот код, мне нужно установить каждый из них. Могу ли я просто установить третье изображение без установки и изменения размеров первого и второго изображений (не хотите прикасаться к правильным изображениям) – Dima

добавление более 2 фоновых изображений - плохое решение. в этом случае я бы использовал решение @ tomahim, которое кто-то запустил. если вы хотите большего контроля. – cocco

Хорошо, что именно то, что я искал, не знал, что можно установить несколько размеров фона – Dima

Не проблема, и для этого вам не нужен Javascript!

.manyImages { 
    width: 500px; 
    height: 500px; 
    background-image: url(/a1.png), url(/a2.png); 
    background-position: center bottom, left top; 
    background-repeat: no-repeat; 
}

Просто отрегулируйте положение в соответствии с вашими потребностями!

--Edit--

Обратите внимание, что новые браузеры поддерживают это обновление CSS3 для фона, но старые браузеры не делают. Я полагаю, что список включает в себя: Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3 +), Opera (10.5+), Internet Explorer (9.0+)

Не цитируйте меня в приведенном выше списке, так как Я могу быть немного от одного или нескольких, но, насколько мне известно, это правда.

источник

2013-12-01 12:00:45 MrJustin

Спасибо за ответ, я хочу контролировать размер DIV и изображений, но каждый размер изображения внутри DIV, например, первый фон изображения должен быть ** 20px X 20px ** второе изображение ** 40px X 45px ** и так далее ... – Dima

Лично, если бы я делал этот метод. Я бы сделал свои снимки «64px на 64px», когда я создал фактическое изображение. но да, размер фона: 20px 20px, 40px 45px; должен сделать трюк. http://www.css3.info/preview/background-size/ Отличный источник информации по текущей теме. – MrJustin

Другим решением может быть что-то вроде этого:

<div class="manyImages"> 
    <div class="image1"> </div> 
    <div class="image2"> </div> 
    ... 
</div>

И на вашем CSS

.manyImages .image1 { 
    background: url(/a1.png) no-repeat; 
} 

.manyImages .image2 { 
    background: url(/a2.png) no-repeat; 
}

Тогда на каждом классе CSS вы можете отрегулировать положение изображения. Преимущество в том, что оно поддерживается всеми браузерами.

источник

2013-12-01 12:03:05 tomahim

Управление каждым свойством стиля для каждого фонового изображения одного div

ответ

Смежные вопросы