Przeźroczystość profilu

[Kodzi]

Witam, posiadam styl deflection.

Chciałbym zrobić, aby profil był przeźroczysty tak, aby było widać tło profilu.

Dotąd próbowałem chyba wszystkiego, jednak zawsze gdy coś znajde z tym związane, to ustawia mi się z napisami itp itd.

Ja bym chciał samo tło, help.

[tenechu]

1 link z forumowej szukajki

 

http://forum.invisionize.pl/topic/45619-lekko-przezroczysto%C5%9B%C4%87/?hl=przezroczysto%C5%9B%C4%87

[Kodzi]

Czytaj. Pisze że jak to ustawiam, to zmienia mi się all.

Ja chce tylko tło, nie z napisami itp

[Versusx3]

Czytaj. Pisze że jak to ustawiam, to zmienia mi się all.

Ja chce tylko tło, nie z napisami itp

Podaj link do forum

[Kodzi]

Forum jest off, więc nic to nie da, a nie mogę włączać.

[aXen]

Forum jest off, więc nic to nie da, a nie mogę włączać.

To my nie możemy Ci pomóc.

Wszystko jest w tym temacie co podał @tenechu.

http://forum.invisionize.pl/topic/45619-lekko-przezroczysto%C5%9B%C4%87/?hl=przezroczysto%C5%9B%C4%87

[Gość Wolen]

Nie wiem dokładnie, o który element profilu Ci chodzi, ale najlepszym sposobem na uzyskanie przeźroczystości nie jest opacity, lecz używanie rgba podczas definiowania koloru elementu. Jaka jest różnica?

Opacity

vs

RGBA

Jak używać RGBA?

 

1. Znajdź w cssie element, który chcesz edytować, ja się posłużę dla przykładu maintitle.

.maintitle {
    background: none repeat scroll 0% 0% #296791;
    color: #FFF;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.25);
    padding: 12px;
    font-size: 12px;
    font-weight: 300;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 4px;
    box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.1) inset;
}

Interesuje nas dokładnie w tym przypadku linijka z właściwością background, a w niej definicja koloru.

background: none repeat scroll 0% 0% #296791;

Przechodzimy na stronę do konwertowania kolorów z HEX do RGG, ja używam tej:

http://www.javascripter.net/faq/hextorgb.htm

W polu po lewej stronie od przycisku Convert to RGB wpisujemy kod koloru w HEXie, lecz bez hash'a. Następnie naciskamy Convert to RGB. Screen:

Gdy mamy już nasz kolor w RGB pora użyć właściwości rgba().

 

Prototyp przedstawia się w ten sposób:

rgba(r, g, b, alpha [stopień przeźroczystości]);

Gdy to wszystko już wiemy nasz kod powinien wyglądać w ten sposób:

.maintitle {
    background: none repeat scroll 0% 0% rgba(41,103,145,0.8);
    color: #FFF;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.25);
    padding: 12px;
    font-size: 12px;
    font-weight: 300;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 4px;
    box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.1) inset;
}

 

background: none repeat scroll 0% 0% rgba(41,103,145,0.8);

0.8 oznacza, że przeźroczystość wynosi 80%. 1 = 100%, 0.9 = 90%, 0.85 = 85% etc. Pamiętaj, że między zerem, a kolejną cyfrą jest KROPKA, a nie przecinek.

 

Jeśli masz jakieś pytania to pisz, starałem się napisać to najbardziej łopatologicznie jak potrafiłem.

Edytowane 12 Marca 2015 przez WoleN

[Kodzi]

Dokładnie chodziło o to, rozchodziło mi sie ciągle, że gdy dawałem opacity, zmieniało się wszystko, razem z napisami (tak jak na zdjęciu pierwszym), a efekt chciałem taki jaki jest na zdjęciu drugim. Wielkię dzięki, jednak jeszcze pozowolę się spytać, gdzie mogę to zmienić?

Chodzi dokładnie o ten fragment:

 

Gdzie dać aby ten fragment uzyskał ten efekt?

[Jacobovsky]

Na deflectionie musisz kombinować z 

.border, .statistics, .post_block, .ipsComment, .popupInner, .no_messages, .poll_question ol, .ipsBox_container, .ipsFloatingAction, .column_view .post_body

i z

.ipsBox

Tylko pamiętaj, że to nie zmienia tła tylko w profilu, lecz w każdym elemencie, który posiada klasę/klasy. Musisz pokombinować albo zlecić komuś takową edycje.

Edytowane 12 Marca 2015 przez Jacobovsky

[Kodzi]

Aktualnie praktycznie się udało, dzięki jaco.

Jednak nadal zasłania mi tło z statystyki społeczności...

[Kodzi]

Z racji iż nie mogę edytować postów, pozwole sobie na następny.

Zrobiłem już przeźroczystość, jednak ramki danych elementów zostały..

[Kodzi]

Nie wiem dokładnie, o który element profilu Ci chodzi, ale najlepszym sposobem na uzyskanie przeźroczystości nie jest opacity, lecz używanie rgba podczas definiowania koloru elementu. Jaka jest różnica?

Opacity

vs

RGBA

Jak używać RGBA?

 

1. Znajdź w cssie element, który chcesz edytować, ja się posłużę dla przykładu maintitle.

.maintitle {
    background: none repeat scroll 0% 0% #296791;
    color: #FFF;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.25);
    padding: 12px;
    font-size: 12px;
    font-weight: 300;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 4px;
    box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.1) inset;
}

Interesuje nas dokładnie w tym przypadku linijka z właściwością background, a w niej definicja koloru.

background: none repeat scroll 0% 0% #296791;

Przechodzimy na stronę do konwertowania kolorów z HEX do RGG, ja używam tej:

http://www.javascripter.net/faq/hextorgb.htm

W polu po lewej stronie od przycisku Convert to RGB wpisujemy kod koloru w HEXie, lecz bez hash'a. Następnie naciskamy Convert to RGB. Screen:

Gdy mamy już nasz kolor w RGB pora użyć właściwości rgba().

 

Prototyp przedstawia się w ten sposób:

rgba(r, g, b, alpha [stopień przeźroczystości]);

Gdy to wszystko już wiemy nasz kod powinien wyglądać w ten sposób:

.maintitle {
    background: none repeat scroll 0% 0% rgba(41,103,145,0.8);
    color: #FFF;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.25);
    padding: 12px;
    font-size: 12px;
    font-weight: 300;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 4px;
    box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.1) inset;
}

background: none repeat scroll 0% 0% rgba(41,103,145,0.8);

0.8 oznacza, że przeźroczystość wynosi 80%. 1 = 100%, 0.9 = 90%, 0.85 = 85% etc. Pamiętaj, że między zerem, a kolejną cyfrą jest KROPKA, a nie przecinek.

 

Jeśli masz jakieś pytania to pisz, starałem się napisać to najbardziej łopatologicznie jak potrafiłem.

 

 

 

Na deflectionie musisz kombinować z 

.border, .statistics, .post_block, .ipsComment, .popupInner, .no_messages, .poll_question ol, .ipsBox_container, .ipsFloatingAction, .column_view .post_body

i z

.ipsBox

Tylko pamiętaj, że to nie zmienia tła tylko w profilu, lecz w każdym elemencie, który posiada klasę/klasy. Musisz pokombinować albo zlecić komuś takową edycje.

 

Dobra, zrobiłem. Trza było border zmienić

Można zamknąć, dzięki za pomoc

Edytowane 12 Marca 2015 przez Kodzi