| Autor | Zpráva | ||
|---|---|---|---|
| Stalker Profil |
#1 · Zasláno: 23. 8. 2013, 09:30:42
Ahoj,
budu kódovat web a budu tam vkládat takovýto obrázek, na kterém bude text. Jak tam nejlépe dát ten text? 
Mám vytvořit div, nastavit mu pozadí a následně do něj vložit ten text? Nebo mám napozicovat obrázek a text a pomocí z-indexu ho překrýt? Nebo je ještě nějaký jiný, lepší způsob? PS: obrázek by měl být klikací s nějakým hoverem. |
||
| Keeehi Profil |
#2 · Zasláno: 23. 8. 2013, 09:53:45
Ten text zůstává nejspíše pořád stajný, takže bych to udělal co nejjednodušším způsobem.
<a href="#"><img src="obrazek.jpg" alt="IZOLACE SPODNÍCH STAVEB"></a> Pokud to chceš ale přece jen skládat, ak by to mělo vypadat nějak takto: <a> -- odkaz, na pozadí obrázek, display: block
<div></div> -- fialové pozadí, opacity, margin-top
<div>IZOLACE SPODNÍCH STAVEB</div> -- margin-top: -50px
</a>ty dva divy se dají smrsknout do jednoho, ale pak se na poloprůhledné fialové pozadí nedá použít opacity, jelikož se toho už pak nezbavíš a i text by byl průhledný. Dá se to řešit pomocí rgba nebo poloprůhledným png na pozadí což však nemusí fungovat ve starších prohlížečích. |
||
| Stalker Profil |
#3 · Zasláno: 23. 8. 2013, 09:58:03
[#2] Keeehi
Díky za reakci. Je asi pravda, že v tomto případě se nevyplatí to skládat a bude lepší použít obrázek jako celek. Ledaže bych tam vložil obrázek už s poloprůhledným fialovým pozadím a vložil tam jen text. |
||
| margin Profil * |
#4 · Zasláno: 23. 8. 2013, 10:26:16
Stalker:
> Mám vytvořit div, nastavit mu pozadí a následně do něj vložit ten text? > Nebo mám napozicovat obrázek a text a pomocí z-indexu ho překrýt? Co se složitosti kódu týče, vyjde to skoro nastejno: Text na obrázku pomocí pozicování Text na obrázku pomocí background-image Ve tvém případě není obrázek dekorační, ale ilustrační, proto bych doporučil použít IMG a CSS. Třebas nějak takto: <img src=http://teststranek.kvalitne.cz/images/obrazek-1.jpg> <h3 style=" width: 320px; margin: -3em 0 0 0; padding: .5em 0; text-align: center; background: rgba(0, 0, 160, 0.4); color: #fff; position: relative;"> kaple svaté Kláry </h3> |
||
| Trejpa Profil |
#5 · Zasláno: 23. 8. 2013, 10:31:30
Stalker:
Řekl bych, že hlavním obsahem je text a obrázek je jen ilustrací. Vložil bych to přirozeně do sebe bez pozicování a obrázek nastavil jako pozadí odkazu. Poloprůhlednost bych řešil pomocí PNG obrázku na vnitřním bloku. Příklad. |
||
| Stalker Profil |
#6 · Zasláno: 23. 8. 2013, 10:46:39
|
||
|
Časová prodleva: 11 let
|
|||
0