Autor Zpráva
jefitto44
Profil
Dá sa v CSS použiť nejaký filter, kde by som prednastavil mnejaký vlastný polopriehľadný pattern, ktorý by sa pridal na obrázky? Cez PHP by som to vedel zrobiť, ale tomu sa chcem tentokrát vyhnúť.
Marschmallow
Profil
jefitto44:
CSS blend
Bubák
Profil
Není to sice tak elegantní, ale stačí dát elementu pozadí, do něj vložit obrázek a obrázku nastavit průsvitnost. Nakódování je pro průměrného kodéra triviální záležitost.
Stejného vizuálního výsledku jde dosáhnout, když bude průsvitný element se vzorkem nad obrázkem, ale to je složitější na nakódování.
jefitto44
Profil
Tomu síce rozumiem, ale tam točíme o miešaní farby a obrázku, ja by som skôr potreboval miešanie dvoch obrázkov...
_es
Profil
jefitto44:
No však jeden obrázok bude ako pozadie a druhý „normálny“ <img> a vo výsledku sa ti „zmiešajú“.
jefitto44
Profil
Bubák:
ale to je složitější na nakódování.

Nie až tak zložitejší... postačí že div bude position:relative a dať mu z-index... spolopriehľadným pozadím sa tak dostane nad obrázok
Bubák
Profil
jefitto44:
div bude position:relative
A zůstane po něm díra. Nehledě na to, že pozice bude závislá na rozměrech obrázku.
Pokud bys použil řešení [#3], tak na problémy, které nastanou při pozicování [#6], není třeba vůbec myslet.

dať mu z-index.
Kýho šlaka proč? V tomto případě šikovný kodér se bez z-indexu obejde, později element (v HTML) je výše. A nakonec, je v tomto případě úplně jedno, zda bude nahoře DIV, nebo obrázek, ale je důležité je, aby horní element byl průsvitný deklarováním CSS opacity.
Marschmallow
Profil
jefitto44:
Živá ukázka s pomocí background v CSS
Živá ukázka s img v HTML
U obou případů je druhá deklarace .pozadi zbytečná, ale může tam být.
Taurus
Profil
Jak prosté od Bubáka: Živá ukázka
Bubák
Profil
Taurus:
Skoro tak jsem to myslel, základní myšlenka je jasná, ale já měl na mysli pixel perfekt řešení (bez mezery pod obrázkem), pokud by po něm někdo toužil, tak:
http://kod.djpw.cz/heib
http://kod.djpw.cz/heib-
Dovolil jsem si i "optimalizaci pro IE6", takže jsem místo DIVu použil SPAN a přidal jsem filter.

[#8] Marschmallow:
Netuším proč, ale nefunguje v klasické Opeře, předpokládám, že půjde o nějakou drobnost, ve zchromené Opeře je to v pořádku.
Taurus
Profil
Bubák:
Já právě chtěl jen demonstrovat tvůj jednoduchý nápad tím, že nepřidám nic navíc. Vyladění je určitě na místě.
Bubák
Profil
Taurus:
Je to tak jednoduché, že jsem sem záměrně nechtěl dát hotové řešení, ať si jefitto44 provětrá mozkové závity. Ale pokud už to bylo v podstatě venku, tak jsem to tady dal komplet.
Už v roce 2001 jsem udělal něco podobného, zmizení vzorku při hoveru obrázkového odkazu, ale fungovalo to jen v IE (Firefox tenkrát teprve začal vystrkovat růžky) a odkazu, který měl na pozadí vzorek, nebylo potřeba deklarovat odkazu inline-block, protože odkaz se v IE roztáhl podle velikosti obrázku.
Tomáš123
Profil
Toto riešenie som vytvoril ako ukážku, ale keďže ich tu bolo už dosť, rozhodol som sa nechať si ju pre seba. Teraz som svoje rozhodnutie zmenil. Vaše ukážky som videl iba zbežne, a tú svoju vytváral nezávisle od vašich. Snáď prinesiem novú variantu: Živá ukážka.
Taurus
Profil
Bubák:
nechtěl dát hotové řešení

Vím moc dobře o čem mluvíš, chtěl jsem si pro jednou vyzkoušet Strawberryho udělátor :-)

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: