-
1. Data: 2010-07-25 10:13:47
Temat: CSS - problem z tłem
Od: Marek <b...@e...com>
Witam,
Chciałbym osiągnąć efekt automatycznego umieszczania banderoli nad
obrazkiem na stronie WWW. Obrazek pobierany jest z CMS i posiada
nieprzewidywalne rozmiary. Banderola ma być nad nim załóżmy 20px od jego
dolnej krawędzi. Jak dokonać automatycznego pozycjonowania banderoli w CSS
względem dolnej krawędzi (bez ingerowania w CMS, bez JS)?
Zobrazowanie:
<div class="thumbnail" style="background-image:url(URL_Z_CMS);
width:SZEROKOSC_Z_CMSpx; height:WYSOKOSC_Z_CMSpx">
<div></div>
</div>
Wewnętrzny <div> będzie zawierał jako tło fragment paska banderoli -
półprzeźroczysty prostokąt z cieniem w PNG 32 powtarzany w poziomie. DIV
może posiadać więc narzuconą wysokość w pikselach i szerokość 100%. Może
też jedno i drugiem mieć ustawione na 100% a pozycjonować będziemy samo
tło. W obu tych wariantach nie bardzo potrafie dać sobie radę.
-
2. Data: 2010-08-12 08:10:38
Temat: Re: CSS - problem z tłem
Od: Zbigniew Malec <a...@i...invalid>
On Sun, 25 Jul 2010 12:13:47 +0200, Marek wrote:
> Chciałbym osiągnąć efekt automatycznego umieszczania banderoli nad
> obrazkiem na stronie WWW.
A do czego ci takie banderolowanie potrzebne? Bo jeżeli do zabezpieczenia
się przed kradzieżą obrazków, to zapomnij o CSS. CSSa zawsze można
wyłączyć, a obrazek i tak pobrać bez twojej banderoli. Jedyne sensowne
rozwiązanie to rozwiązanie server-side. Banderola (znak wodny?) powinien
być już w obrazku, a nie "nad" nim.
No chyba że interesuje cię apekt czysto wizualny, to wtedy oczywiście CSS
się nada, ale to może ktoś inny ci już pomoże.
--
Pozdrawiam
Zbyszek Malec
-
3. Data: 2010-08-12 11:08:20
Temat: Re: CSS - problem z tłem
Od: satellite <p...@g...pl>
On 2010-07-25 12:13, Marek wrote:
> Zobrazowanie:
>
> <div class="thumbnail" style="background-image:url(URL_Z_CMS);
> width:SZEROKOSC_Z_CMSpx; height:WYSOKOSC_Z_CMSpx">
> <div></div>
> </div>
zobacz cos takiego :
.thumbnail{
background: #CAC;
position: relative;
}
.thumbnail div{
background: #EDA;
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
}