background-position c background не должен работать ?

[iillyyaa2]

background-position c background не должен работать ?

почему второй див не работает ??

<style>
div.all {
	display:block;
	position: relative;
	width:100px;
	height:100px;
	background:url(9x100.png);
	cursor:pointer;
}
.background_position_300_0{
        background-position: 300px 0px;
}
</style>

<div class="all" style="background-position: 300px 0px"></div>
<div class="all background_position_300_0"></div>

а вот так работают правильно оба дива:

<style>
div.all {
	display:block;
	position: relative;
	width:100px;
	height:100px;
	background-image:url(9x100.png);
	cursor:pointer;
}
.background_position_300_0{
        background-position: 300px 0px;
}
</style>

<div class="all" style="background-position: 300px 0px"></div>
<div class="all background_position_300_0"></div>

(в коде изменены только background на background-image)

почему так ?

Edited May 27, 2011 by iillyyaa2

[Great Rash]

Потому что div.all - более мощное правило с большим приоритетом. Так будет работать:

.all {
        display:block;
        position: relative;
        width:100px;
        height:100px;
        background:url(9x100.png);
        cursor:pointer;
}
.background_position_300_0{
        background-position: 300px 0px;
}

или так:

div.all {
        display:block;
        position: relative;
        width:100px;
        height:100px;
        background:url(9x100.png);
        cursor:pointer;
}
div.background_position_300_0{
        background-position: 300px 0px;
}

рекомендую первый вариант.

[iillyyaa2]

а почему с background-image сработало ?

потому что background уже содержит background-position и последующее не учёл, а у background-image позиционирования нет вообще и он добавил ?

Edited May 27, 2011 by iillyyaa2

[Great Rash]

Ага именно так. В background все эти значения не отсутствуют, а просто ставятся браузером по дефолту, типа 0 0 repat.

[iillyyaa2]

вот ещё такой вопрос...

.all {
	display:block;
	position: relative;
	width:450px;
	height:60px;
	background:url(900x420.png) no-repeat;
	cursor:pointer;
}
.background_position_0_0{
        background-position: 0px 0px;
}
.background_position_0_60{
        background-position: 0px -60px;
}
.background_position_0_0:hover{
        background-position: -450px 0px;
}
.background_position_0_60:hover{
        background-position: -450px -60px;
}

<div class="all background_position_0_0"></div>
<div class="all background_position_0_60"></div>

всё работает, вот только напрягает большое кол-во .background_position_0_0:hover

можно как то в одну строчку им задать ?

как поменять только смещение по х ?

background-position-x не предлагать, т.к. он не во всех браузерах работает

Edited May 27, 2011 by iillyyaa2

[buddah]

Можно задавать элементы через запятую, но только если к ним применяются одинаковые стили, а у тебя все координаты разные.

[iillyyaa2]

это да, думал может есть хитрый способ какой указать 1 координату а вдруг