3 listopada 2012

Półprzezroczyste lub obrazkowe tło w postach

     Wiele osób pyta się, jak ustawić półprzezroczyste lub obrazkowe tło w notkach. Najprostszym sposobem jest wpisanie odpowiedniej formuły w kodzie CSS. Ów sposób działa w niemal wszystkich szablonach wyjściowych i zajmuje dosłownie chwilę.

Półprzezroczyste tło
     Wystarczy wejść w układ - > dostosuj - > zaawansowane - > arkusz CSS i wpisać właściwą formuły. Może najpierw przedstawię sposób na półprzezroczyste tło. Formuła wyjściowa:


selektor {background: rgba(nasz kolor, wartość przezroczystości)}

Selektorem jest nazwa gadżetu, którego chcemy zmienić tło. W przypadku tła notek kod wygląda tak:

.post-outer {background: rgba(nasz kolor, wartość przezroczystości)}

Skoro mamy już selektor, to pora na wybranie koloru, tutaj macie tabele, skąd możecie pobrać odpowiednie własności. Można robić to również ręcznie, na wyczucie, ale chyba posługiwanie się tabelą jest łatwiejsze. 
Okey, ja wybrałam sobie jeden z odcieni szarości. Kod w tabeli wyglądał tak: LightGray RGB: 211 211 211. Kopiuję tylko liczby.

.post-outer {background: rgba (211, 211, 211,0.48)}

Musicie pamiętać o wstawieniu przecinków między liczby. Jeśli tego nie zrobicie, to kod nie będzie działać!
Nie wiem, czy zauważyliście, ale pojawiła nam się jedna nieznana liczba - mianowicie 0.48 - jest to liczba, która określa przezroczystość. Im jest większa, tym wyraźniejszy jest kolor, im mniejsza, tym kolor bardziej zanika. Najlepiej pobawcie się nią trochę i wybierzcie wartość, która najbardziej Wam odpowiada. 

Tło obrazkowe 
Tym razem krócej, bo wystarczy znać odpowiedni selektor. Nasz kod wygląda tak:

selektor {background: transparent url(bezpośredni link do obrazka)}

Wiemy już, jak wygląda selektor postu, więc zamieniamy:

.post-outer {background: transparent url(bezpośredni link do obrazka)}


Druga instrukcja jest bardzo, bardzo prosta, dlatego wyszła taka krótka. Co do selektora postów, to jeśli nie działa .post-outer to możecie wypróbować body .main-inner .Blog, jednak przeważnie ten pierwszy działa bezbłędnie.
To już koniec. Proste, prawda? Jeżeli coś jest nie jasne, to piszcie.

51 komentarzy:

  1. Cześć, a ja mam w sumie takie pytanie. Razem z koleżanką zastanawiamy się, jak zrobiłaś tą ramkę, która widnieje na blogu. Znaczy, z ramką już sobie poradziłyśmy, tylko powstaje pytanie, jak i gdzie wkleiłaś spód ramki, to jej zakończenie na dole. Czy mogłabyś nam wytłumaczyć? Bo męczymy się już troszkę i chyba nie kumamy tego ;) Pozdrawiam!

    OdpowiedzUsuń
    Odpowiedzi
    1. Uch, makabra, w końcu kupili mi kompa...
      O ile dobrze pamiętam (a stara jestem i lecytyna nie wystarcza), to walnęłam ją bezczelnie w stopkę. Tj: miałam całą ramkę w kształcie prostokąta, ucięłam dolną część i wcisnęłam ją we fragment kodu następujący:

      /* Footer
      ----------------------------------------------- */
      .footer-outer {
      margin-left: 166px;
      margin-bottom: -1px;
      margin-top: 0px;
      padding-bottom: 60px;
      color: $(footer.text.color);

      background: url(TUTAJ ADRES OBRAZKA) no-repeat;}

      .footer-fauxborder-left {
      border-top: 1px solid $(widget.border.color);
      background: $(footer.background.color) $(footer.background.gradient) repeat scroll 0 0;


      margin: 0 -$(shadow.spread);
      }

      Ok, najlepiej na sam początek wrzuć w linku ten obrazeczek końcówkowy. Dopiero później zastosuj marginesy, paddingi itp (nie kieruj się moimi parametrami, bo możesz potrzebować innych). Chodzi mi dokładniej o te:
      .footer-outer {
      margin-left: 166px;
      margin-bottom: -1px;
      margin-top: 0px;
      padding-bottom: 60px;
      color: $(footer.text.color);
      Wpisuj wartości najlepiej metodami prób i błędów :) podglądaj sobie po kawałeczku czy idzie Ci w dobrą stronę, czy nie. Aha - i najważniejsze. Ta metoda jest marna i stopka lata na wszystkie strony - zależnie od monitora. Teraz (mam nowego lapka, tamten się... spalił chyba) mam wszystko krzywo, chociaż na laptopie mojego brata jest ok -.-
      A, i sorry za późną odpowiedź =o= Po prostu nie miałam dostępu do kompa przez cały ten czas ><'''

      Usuń
  2. hej chce ustawić to pół przeźroczyste tło i wpisuje twój przykład i próbuję sama i nic mi nie wychodzi, nie wiesz może co może być tego przyczyną

    OdpowiedzUsuń
    Odpowiedzi
    1. Nie ja pisałam notę, ale może pomogę. Najlepiej, żebyś na początku podała adres do swojego bloga (tego, nad którym pracujesz). :)

      Usuń
  3. Odpowiedzi
    1. Zrobimy tak: mojego maila masz podanego na zaczarowane-szablony. Wyślij mi na maila swój spakowany szablon, podaj mi jaki chcesz kolor tego tła. Ja pokombinuję, a jak mi się uda, to napiszę Ci, jak to zrobiłam.

      Usuń
  4. Mam problem. To mój blog, ale nie potrafię wgl. zrobić jakiegos tła posta. Chodzi o to, żeby tło posta nie było niewidoczne. A niestety po wpisywaniu w arkusz CSS nic mi nie wychodzi.http://wondervouge.blogspot.com/

    OdpowiedzUsuń
  5. Hej. Bez wglądu do szablonu mi ciężko, ale spróbujmy.
    Zapisz sobie szablon w Szablon -> utwórz kopię zapasową.
    Wejdź do HTMLA szablonu.
    Wciśnij ctrl + F
    W pole wyszukiwania wpisz:
    Main Background

    Widzę, że u Ciebie jest:

    Variable name="main.background" description="Main Background" type="background"
    default="transparent url(//www.blogblog.com/1kt/transparent/white80.png) repeat scroll top left"/

    Ten link:
    www.blogblog.com/1kt/transparent/white80.png
    to właśnie to białe, lekko przezroczyste tło. Skasuj link. Kod będzie wyglądał tak:

    Variable name="main.background" description="Main Background" type="background"
    default="transparent url(//) repeat scroll top left"/

    Daj Podgląd. Czy widzisz jakieś zmiany? ._.

    OdpowiedzUsuń
  6. Hej, wiesz może co zrobić, żeby tło się nie powtarzało? Bawię się z tym już trochę czasu i cierpliwość powoli mi się kończy...

    OdpowiedzUsuń
    Odpowiedzi
    1. Hej, Anonimie :) Piszesz o tle w poście, tle w kolumnie, tle całego bloga? :) Jeśli jest to zalinkowany obrazek, to zaraz po linku, a przed nawiasem zamykającym komendę, wpisujesz no-repeat czyli na przykład:
      background: url(link_obrazka) top left no-repeat}
      Obrazek nie powtórzy się, będzie przylegał do lewej strony i do góry.

      Usuń
    2. Było to tło w poście, ale w każdym razie działa. Jestem taka wdzięczna ;u;

      I jeszcze takie małe, głupie pytanie (a jakże inaczej...). Albowiem obrazkowe tło ustawiłam sobie również w widgetach. Zrobiłam wszystko tak samo jak na instrukcji, ale .post-outer zamieniłam na .widget. Problem tkwi w tym, iż pod nagłówkiem mam strony i pod nimi te tło także się pojawia, a że brzydko to wygląda, to natychmiast chcę je zlikwidować. Jest taka możliwość, aby konkretnie z tego jedynego miejsca usunąć tło obrazkowe?
      Dodam, że nie są to strony, które domyślnie można postawić na blogu gdzieś-tam daleko w ustawieniach. Zrobiłam je na zasadzie "obrazko-linków", postawionych obok siebie.
      Liczę na "małą" pomoc, bo takie stworzenia jak ja w życiu sobie z tym nie poradzi ,_,

      ~~Zapomniałam się wcześniej zalogować .-.,

      Usuń
    3. Spoczko ^^
      Próbuję sobie to wyobrazić, ale, kurde, trudno jakoś mi to idzie(niedziela wieczorem...).
      Informacja o tym, że nie są to zwykłe strony, jest bardzo istotna. Myślę, iż będzie się to dało pousuwać - tylko jeszcze nie jestem pewna metody, bo nigdy tego nie robiłam.
      Wejdź w układ, najedź kursorem myszy na edytuj, wyświetli Ci się na dole strony długaśny adres i będzie pisało w środku widgetID=#Image1 (lub coś podobnego). Zapamiętaj to specyficzne widget ID (każdy gadżet ma inne, Ty bierzesz tylko tych gadżetów, w których są zalinkowane obrazki)
      (nie wiem czy mam pisać o funkcjach podstawowych, czy już cośtam wiesz :D)
      Wchodzisz do Dostosuj -> CSS, wklepujesz
      #Image1 (przykładowo) {background: none}
      Powinno załatwić sprawę. Jeśli nie, pokombinuję jeszcze.
      Nie wiem czy coś zrozumiałaś, bo piszę jak wariot.

      Usuń
    4. Mogę umrzyć, bo działa. Jestem taka wdzięczna! QuQ
      Nawet ogarnęłam gdzie te ID sprawdzać, bo męczyło mnie to od dłuższego czasu.
      Tak bardzo dziękuję, znowu~~ >u<

      Usuń
    5. Hah, nie ma sprawy :)
      ID były opisane w pierwszej nocie bardzo szczegółowo, a nawet tak szczagółowo, że aż nudząco XD

      Usuń
  7. Mam pytanie: jak się robi coś takiego?

    http://tinypic.com/r/eu29ht/6

    Ten Url prowadzi do zdjęcia z Zaczarowanych Szablonów. Jest na nim pokazany spis (do notek).

    Nie mam pojęcia jak się za to zabrać. (Jestem polonistką i tylko czytam na komputerze, na serio nic więcej). Ostatnio mnie wzięło. Bo skoro nawet szesnastolatki potrafią napisać coś obrego, to czemu nie ja.
    Spróbowałam - chcę to opublikować... ale chcę też, aby wszystko było należyte, albowiem chcę ułatwić posługiwanie się i wyszukiwanie różnych rzeczy moim czytelnikom.

    I jeszcze coś... jak się najezie na lin ko napisy się zrozsuwają. O tak (nie umiałam inaczej tego przedstawić) z tego "Spis Treści" na to "S p i s T r e ś c i".

    Liczę na jakąkolwiek pomoc.

    OdpowiedzUsuń
    Odpowiedzi
    1. Och, zapraszam do postu numer 03., wszystko jest tam wyjaśnione :)jak się najedzie na linki to te literki się odsuwają od siebie, tak? Powinno działać to w CSS:
      a:hover {letter-spacing: 1px;}
      Jeśli nie działa to daj znać, poszukam jeszcze raz.
      Aaa! No i ta komenda nie będzie działała w tej rameczce, której screena zrobiłaś. Nawet nie jestem pewna czy da się tak zrobić. Chyba zbyt wysoka szkoła jazdy jak dla mnie :)
      Też jestem polonistką, ale jakoś trzymam się okrętu w blogspotowo-HTMLowym sztormie. ^^

      Usuń
  8. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
  9. Kurcze no, wpisałem kod tak jak podałaś i nie działa. Nie mam pojęcia dlaczego, kombinowałem, kombinowałem i nic :/

    OdpowiedzUsuń
    Odpowiedzi
    1. To nota Jill :) Zamierzam wkrótce zrobić drugi sposób na półprzezroczyste tlo.

      Usuń
  10. Też wpisałam ten kod i nie działa mi ta opcja. Z tym, że ja mam już ustawione półprzezroczyste tło, jedynie jest problem z czytelnością liter. Udało mi się wymyślić (nie wiem czy właściwie), żeby zrobić ciemniejsze tło pod notkami (tj. zmniejszyć przezroczystośc i zmienić kolor na ciemniejszy) i dać jasne napisy ...

    Jesteś w stanie mi pomóc? Ewentualnie doradzić inne rozwiązanie? :)
    Link do bloga masz na profilu moim ;)

    OdpowiedzUsuń
  11. Właśnie zerknęłam i dałam radę :) Dzięki wielkie. Jeszcze taki dodatek do pytania - czy do elementu/gadżetu też można w podobny sposób dodać przezroczystość? Bo chciałabym na dole strony dodać obrazek/link, ale wrzuca się on w stopkę, więc przyjmuje jej tło ... Da się zrobić przezroczyste? :>

    OdpowiedzUsuń
    Odpowiedzi
    1. Można, można. Tylko rób malutkie kwadraciki ^^

      Usuń
  12. Tylko to wtedy jak? Dodać CSS, tak jak w przypadku tła notek, tylko inny selektor dodać? Tylko jaki --- taki jaki mi się wyświetli po zbadaniu? :> I zapisać to wtedy w ten sam sposób co te tło notek? :>

    OdpowiedzUsuń
    Odpowiedzi
    1. Badanie to bardzo dobry trik na zbadanie selektora. Robisz dokładnie to samo, tylko wstawiasz inny selektor. Np. Jak chcesz zmienić tło pod statystyką to wpisujesz
      #Stat1
      Podstawowe selektory osobnych gadżetów wyjaśniłam trochę w perwszej nocie ^^

      Usuń
  13. Mam pytanie. Powiedzmy, że ustawię tło jakie chcę, ale gdy dodam "czytaj dalej", to dane tło mi się przytnie czy nie pokaże?

    OdpowiedzUsuń
  14. Ten komentarz został usunięty przez administratora bloga.

    OdpowiedzUsuń
  15. A ja mam pytanie dziwne dość :) Mam obrazek, który posiada przezroczyste tło. Umieszczając go w poście lub w bocznych kolumnach tło nie robi się przeźroczyste, jakie powinno być, tylko białe. Jak tą biel usunąć ? :)

    OdpowiedzUsuń
    Odpowiedzi
    1. A zaglądałaś w Ustawienia > Posty i komentarze > wyświetlaj obrazy w widoku lightbox? (ma być na nie)

      Usuń
  16. Hej.Czy można rozciągnąć tło, ponieważ nie chcę by się powielało, bądź jakie rozmiary w pikselach powinno mieć tło? :)

    OdpowiedzUsuń
    Odpowiedzi
    1. jak wklepiesz komendę

      background-repeat: no-repeat;

      do tego tła, to nie będzie się powielać :)

      Jeżeli dasz jeszcze komendę:
      background-size: cover;

      Obrazek dostosuje się do Twojego ekranu. Tzn, jak będzie za duży to się zmniejszy, a jak za mały, to się naciągnie.

      Usuń
  17. nie moge znalesc "zapisz"

    OdpowiedzUsuń
    Odpowiedzi
    1. U góry po prawej (o ile to nie prowokacja)

      Usuń
  18. udało się udało się!!!!
    siedzę na blogspot od 5 rano a mamy 12.17!!!
    zdanie było trudne ale realne do wykonania!!!
    użyłam jedynie części tego kodu a właściwe polecenia:
    rgba(nasz kolor, wartość przezroczystości)-(rgba (211, 211, 211,0.48)
    żeby uzyskać taki efekt http://4-udlaciebie.blogspot.com/
    trzeba w ustawieniach zaawansowane: background:
    wybrać przezroczyste w każdej opcji tła.
    zastosować do bloga a następnie edytować kod HTML
    i wyszukać ten oto fragment:

    /* Flexible Background
    ----------------------------------------------- */
    .content-fauxcolumn-outer .fauxborder-left {
    width: 100%;
    padding-left: $(body.background.imageBorder.position.left);
    margin-left: -$(body.background.imageBorder.position.left);
    background-color: transparent;
    background-image: $(body.background.imageBorder);
    background-repeat: no-repeat;
    background-position: left top;
    }


    .content-fauxcolumn-outer .fauxborder-right {
    margin-right: -$(body.background.imageBorder.position.right);
    width: $(body.background.imageBorder.position.right);
    background-color: transparent;
    background-image: $(body.background.imageBorder);
    background-repeat: no-repeat;
    background-position: right top;
    }

    słowo TRANSPARENT!!!! ( background-color:transparent) zastepujemy poleceniem:
    rgba(191,239,255,0.5)

    odpowiednio przerobionym do naszych potrzeb wg wskazówek w Jill
    jest jeszcze kwestia szerokości ale to jest do regulacji w opcjach szablonu suwakiem chyba w dostosuj szerokości ;)
    Pani Jill wiem,że to chaotycznie napisane ale pani to zrozumie i z całą pewnością napisze prostą notką z pogrubionymi lub podkreślonymi fragmentami kodu :)
    pozdrawiam



    OdpowiedzUsuń
  19. Hej, zauważyłam, że na niektórych szablonach każdy gadżet jest w oddzielnej ramce i bardzo bym chciała uzyskać podobny efekt. Stosowałam kod .sidebar {border-radius: 20px 30px 40px 50px;} aby zaokrąlić rogi wszystkich gadzetów albo sidebar-right-2-1 {border-radius: ...} aby zaokrąglić rogi tylko jednego gadzetu, ale zaden z nich nie działa :< Proszę o pomoc.
    I całe szczęście, że istnieją tacy ludzie, którzy zechcieli pomóc z tymi kochanymi kodami CSS :) Wieeelkie dzięki !

    OdpowiedzUsuń
    Odpowiedzi
    1. Daj adres swojego bloga :)
      Daj adres bloga, który tak ma, ewentualnie screenshota ^-^
      Teraz taka moda na te osobne gadżety, pytają o to wszyscy (odpowiadałam komuś w zakładce "Zapytaj" i mailowo kilka razy Xd).
      Zaradzimy, jakoś to zrobimy :D

      Usuń
    2. http://funkyimg.com/u2/4309/859/402715prvmine.png
      taki efekt jak tutaj :)
      http://szablon111111.blogspot.com/ - a to moj adres, bloga załozyłam zeby pobawić sie w CSSie :)

      Usuń
    3. A dodaj tam jakiś gadżet, żebym widziała jakie ma tło, albo coś.
      U mnie kiedyś działał taki:

      .column-right-inner .widget {blahblah}

      zamiast right można dać left. W miejsce blahblah kod, który chcesz zastosować.

      Usuń
  20. dzień dobry!
    zastosowałam się do instrukcji, wpisując do arkuszu następujący kod:
    .post {background-image: url(http://img22.otofotki.pl/obrazki/td277_tlo_posta.png);}
    i działa, ale podczas przewijania postu co jakiś czas pojawiają się takie fioletowe cienkie paski. jak się ich pobyć?
    mój blog: http://zbyt-trudne.blogspot.com/

    OdpowiedzUsuń
    Odpowiedzi
    1. Hm, zrobiłam tak:
      kliknęłam sobie prawym na twoje tło i je pobrałam, otwieram na komputerze, a ono takie duuże...

      Co można by zrobić:
      Metodę opisałam w poście 09. Streszczenie i lekka modyfikacja dla Ciebie:

      1. Weź to tło i obetnij w jakimś programie graficznym. Ja mam zwykły Microsoft Office Picture Manager. Możesz też obciąć w Photoshopie lub Gimpie, zależy czego używasz. Obrazek tła powinien być wielkości Twojego paznokcia. Nikt się nie obrazi, jeśli będzie wielkości ziarenka maku. W tym wypadku im mniejszy kwadracik, tym lepszy.

      Dlaczego?
      Małe obrazki szybciej się ładują. Najszybciej ładują się obrazki, które swój direct link mają w w blogspocie (wtedy, kiedy wgrywamy je od razu z komputera na blogspot).

      Dlaczego taki mały obrazek, skoro moje tło pod postami jest o wiele większe?
      Tym się nie martwmy. CSS pozwoli nam powielić ten kwadracik w miarę potrzeb.

      2. Zalinkuj jakoś ten kwadracik, żeby mieć direct link.

      3. Komenda do CSS wygląda tak:
      .post {background: url(url_obrazka) repeat}

      Musi być repeat, bo to oznacza, że pozwalamy temu kwadracikowi powielać się w nieskończoność w obrębie postu.

      Usuń
    2. bardzo dziękuję za pomoc, zastosuję się do Twojej rady i zobaczę, co z tego wyjdzie. :) w razie czego napiszę jeszcze raz, zatruwając ci głowę :)
      (PS. czemu ci się łezka zakręciła? czyżbyś miała aż taki sentyment do Krzyśka? :D
      przepraszam, ale nie mogłam się powstrzymać, bo zauważyłam twój komentarz pod Bohaterami :) )

      Usuń
    3. + wszystko działa tak jak trzeba;
      dziękuję Ci bardzo :* :* :* :*

      Usuń
    4. Chodziło mi bardziej o to, że bohaterowie to zazwyczaj Amerykanie, ewentualnie Polacy z amerykańskimi imionami ;D

      Usuń
    5. aha, u mnie to najwyżej będzie jeden Amerykanin ( tak epizodycznie), ale to zawodnik Sovii. :)
      jeszcze raz dziękuję za pomoc :*

      Usuń
  21. hej, coś się stało z tym linkiem?
    chodzi mi o ten fragment: "Skoro mamy już selektor, to pora na wybranie koloru, tutaj macie tabele, skąd możecie pobrać(...)"
    bo mi nie chce działać, nie wiem czemu

    OdpowiedzUsuń
  22. hej mam problem dopiero założyłam bloga i nie za bardzo ogarniam jak dać to tło mój blog to http://breathecarolina-thebestband4ever.blogspot.com/ chcę żeby tło postów było lekko przeźroczyste tak żeby było widać zdjęcie na tle strony. W arkuszu CSS mam zapisane tak:
    body {
    font: normal normal 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
    color: #CCC;
    background: #114170url(http://lh5.googleusercontent.com/-iacsh-fU7TI/Us2a7t7x3iI/AAAAAAAAACE/O7u_E4SmV_s/h000/bctlo.jpg) no-repeat fixed top center;
    background-size: cover;
    }
    Co i gdzie mam dodać żeby tak się zrobiło ?

    OdpowiedzUsuń
    Odpowiedzi
    1. aha i jeszcze żeby tło gadżetów też było takie jak tło postów

      Usuń
  23. Czy ktoś Wie jak usunąć stopkę bloga aby nie było tej przerywanej linii na samym dole przy autorach o tej ------------------------------------------------------------------- prosze o pomoc bardzo mi na tym zależy z góry dziękuję i pozdrawiam :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Trochę ("trochę") z opóźnieniem, ale może jeszcze komuś się przyda. Otóż ja wiem. Trzeba wejść w edycję kodu html i wyszukać (ctrl+F) w przypadku kropek "dotted", w przypadku kresek "dashed", a następnie albo zamienić przy tym kolor na "transparent" albo usunąć linijkę z kodu.

      Usuń

szukaj

Ładowanie...