it-swarm-eu.dev

Jak nastavit polohu pozadí na absolutní vzdálenost, počínaje vpravo?

Chci nastavit obrázek pozadí pro div tak, že je v horní pravé _ div, ale s pevnou 10px vzdáleností shora a vpravo.

Zde je návod, jak bych to udělal, kdybych to chtěl v hornímVLEVOdivu:

pozadí: url (images/img06.gif) no-repeat 10px 10px;

Je tam stejně dosáhnout stejného výsledku, ale ukazuje pozadí na horním_ _ _?

23
bahadorn

Použijte výše uvedené pravidlo spolu s horním a pravým okrajem:

background: url(images/img06.gif) no-repeat top right;
margin-top: 10px;
margin-right: 10px;

Obrázky na pozadí se zobrazují pouze v polstrování, nikoli v okrajích. Pokud přidáte marže není možnost, budete muset uchýlit k další div, i když bych doporučil použít pouze jako poslední možnost, aby se pokusila udržet vaše značky jako štíhlé a sementic je to možné.

15
roryf

Ve Firefoxu, IE9 a Opera 10.5 můžete použít syntaxi čtyř hodnot, zadanou v CSS3 :

background-position: right 10px top 10px;

Zdroj: MDN

27
Boldewyn

Existuje několik způsobů, jak to udělat.

  1. Pokud je to možné, udělejte matematiku. Už znáte rozměry vašeho obrazu. Znáte-li rozměry div, můžete jen dát obrázek na (div šířka - šířka obrazu - 10, div výška - výška obrázku - 10).

  2. Použijte Javascript udělat těžké zvedání pro vás. Téměř stejná metoda jako výše, kromě toho, že nemusíte znát rozměry samotného div. Javascript vám může říct.

  3. Více hackish způsobem by bylo dát 10px transparentní ohraničení kolem horní a pravé části obrázku, a nastavit pozici top right.

10
Justin Poliey

Nevím, jestli je to možné v čisté css, takže si můžete vyzkoušet 

background: url(images/img06.gif) no-repeat top right;

a upravte obraz tak, aby obsahoval 10px ohraničení nahoře a vpravo v průhledné barvě

6
mathieu

Můžete použít procenta:

background: url(...) top 98% no-repeat;

Pokud znáte šířku mateřského div, mělo by být snadné určit, jaké procento potřebujete použít.

1
Rahul

Jedním z řešení je absolutně umístit prázdné div a dát tomu pozadí. Nevěřím, že existuje způsob, jak to udělat čistě s CSS, bez změn na obrázku a bez dalších značek v tekutém uspořádání.

0
ceejayoz

Prostor na pravé straně můžete ohraničit ohraničením v pixelech (většinou bílá nebo možná něco jiného)

  background-image: url(../images/calender.svg) center right
  border-right: 5px white solid
0