Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Przezroczysty, zaokrąglony DIV
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
janekpogwad
Witam!

Mam pytanie. Chciałbym zrobić takiego div'a, który byłby półprzezroczysty, ale tylko tło (litery, formluarze, przyciski nie) oraz żeby jego rogi, były nieco zaokrąglone. Nie chce, żeby był oparty od obrazki. Coś podobnego jest w kokpicie BLIP. Może wiecie jak to zrobić?questionmark.gif

Pozdr.
erix
Cytat
Nie chce, żeby był oparty od obrazki.

Nie da się. No chyba, żebyś pozycjonowaniem absolutnym nakładał jedną warstwę na drugą. Ale nigdy Ci się to nie uda, aby dziecko było nieprzezroczyste, a rodzic tak.

Zresztą, popatrz:

Kod
div#content-full div.bliposphere-rounding-top {
  background: url(/images/bliposphere-top.png) top left no-repeat;
  font-size: 6px;
  height: 6px;
  line-height: 6px;
  width: 800px;
}

div#content-full div.bliposphere-rounding-bottom {
  background: url(/images/bliposphere-bottom.png) top left no-repeat;
  font-size: 6px;
  height: 6px;
  line-height: 6px;
  width: 800px;
}
kamil4u
Cytat
Nie chce, żeby był oparty od obrazki.

Podaj mi chociaż 1 powód dlaczego nie chcesz zastosować metody z wykorzystaniem obrazków?
debian
Co do zaokrąglenia rogów bez użycia obrazków jest na to pewien parametr w CSSie ale oczywiscie IE, Opera tego nie rozpoznają. w FF wszystko gra. Zobacz:
Kod
div.klasa{
     width:160px;
     margin-top:3px;
     margin-bottom:3px;
     background-color:#F4F4F4;
     border:1px #B4B4B4 solid;
     -moz-border-radius:4px;   /*Tutaj ustawiasz w pikselach jakie ma być zaokrąglenie rogu*/
     color:#474747;
     font-family:Tahoma;
     font-size:12px;
     padding:5px 25px;
     }



Co do przeroczystości to takie coś:
Kod
div.przezroczystosc{
    filter:alpha(opacity=50);
    -moz-opacity:.50;
     opacity:.50;
}

W takiej klasie umieszcza np, obrazek który ma być pół przezroczysty, wszystko jest w procentach %
  1. <div class="przeroczystosc"><img src="obrazek.jpg" alt="" width="" height="" /></div>
piotrooo89
co do przeźroczystości IE może mieć problem.

przezroczystosc
deeper
Ja to robie tak:

  1. <div class="box">
  2. <div class="tlo"></div>
  3. <div class="tresc">Tresc ... formularz, przyciski</div>
  4. </div>



a style:
  1. .box {
  2. position: relative;
  3. }
  4. .tlo {
  5. position: absolute;
  6. top: 0;
  7. left: 0;
  8. z-index: 2;
  9. background-color: #000;
  10. filter:alpha(opacity=50);
  11. -moz-opacity:.50;
  12. opacity:.50;
  13. }
  14. .tresc {
  15. position: absolute;
  16. top: 0;
  17. left: 0;
  18. z-index: 3;
  19. }


Oczywiscie wszelkie rozmiary ustalamy po swojemu.
Caly myk polega na tym zeby umiescic 2 przygotowane divy 1 nad drugim (z-index),
przy czym temu pod spodem nadajemy przezroczystosc.
Uzyskujemy transparentne tlo i nietransparentna zawartosc.

Co do zaokraglania bez grafiki to nie wszystkie przegladarki to lykna wiec mozna sobie odpuscic.

Dodam ze wszystko co zostanie umieszczone w .tlo bedzie transparentne.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.