Przezroczysty obraz tła z gradientem

Question

Przezroczysty obraz tła z gradientem

Dzisiaj projektowałem przezroczyste tło PNG, które siedziałoby tylko w lewym górnym rogu div, a reszta div utrzymywałaby gradientowe tło dla wszystkich przezroczystych obszarów PNG, a reszta samego div.

Może lepiej wyjaśnić przez kod, który myślałem, że może działać:

#mydiv .isawesome { 
    /* Basic color for old browsers, and a small image that sits in the top left corner of the div */
    background: #B1B8BD url('../images/sidebar_angle.png') 0 0 no-repeat;

    /* The gradient I would like to have applied to the whole div, behind the PNG mentioned above */
    background: -moz-linear-gradient(top, #ADB2B6 0%, #ABAEB3 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ADB2B6), color-stop(100%,#ABAEB3));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ADB2B6', endColorstr='#ABAEB3',GradientType=0 );
}

Znalazłem to, że większość przeglądarek wybiera jedną lub drugą-większość wybiera gradient, ponieważ jest dalej w pliku CSS.

Znam niektóre z faceci tutaj powiedzą "po prostu zastosuj gradient do PNG, który tworzysz" - ale to nie jest idealne, ponieważ div utrzyma dynamiczną wysokość-czasami jest bardzo krótki, czasami jest bardzo wysoki. Wiem, że ten gradient nie jest niezbędny, ale pomyślałem, że warto zapytać was o to, co myślicie.

Czy można mieć obraz tła, zachowując resztę tła jako gradient?

23

image css css3 gradient background

Author: BoltClock, 2011-04-16

Source

5 answers

Kolejność obrazu i gradientu jest tutaj bardzo kluczowa, chcę to wyjaśnić. Kombinacja gradient / obraz działa najlepiej w ten sposób...

background: -webkit-gradient(linear, top, rgba(0,0,0,0.5), rgba(200,20,200,0.5)), url('../images/plus.png');

background-image będzie działać...

background-image: -webkit-gradient(linear, top, rgba(0,0,0,0.5), rgba(200,20,200,0.5)), url('../images/plus.png');

Gradient musi być pierwszy... na szczyt. Klucz absolutny jest tutaj jednak taki, że gradient używa co najmniej 1 koloru RGBA... kolory muszą być przezroczyste, aby obraz mógł przejść. (rgba(20,20,20,***0.5***)). umieszczenie gradientu jako pierwszego w CSS umieszcza gradient na górze obrazu, więc im niższe ustawienie alfa na Tobie RGBAs, tym więcej widzisz obraz.

Teraz z drugiej strony, jeśli używasz odwrotnej kolejności, PNG musi mieć przezroczyste właściwości, tak jak gradient, aby pozwolić gradientowi świecić. Obraz jest na wierzchu, więc PNG musi być zapisany jako 24-bitowy w programie photoshop z obszarami Alfa... albo 32 bit w fireworks z obszarami Alfa (albo gif chyba... barf), dzięki czemu można zobaczyć gradient pod spodem. W tym przypadku gradient może używać HEX RGB lub RGBA.

Kluczową różnicą jest tutaj wygląd. Obraz będzie o wiele bardziej żywy, gdy będzie na górze. Gdy pod spodem masz możliwość dostrojenia wartości RGBA w przeglądarce, aby uzyskać pożądany efekt... zamiast edytować i zapisywać tam iz powrotem z oprogramowania do edycji obrazu.

Mam nadzieję, że to pomoże, przepraszam za zbyt duże uproszczenie.

5

Author: Brendan Wolfe,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-02-14 18:33:55

Możesz użyć przezroczystości i gradientów . Gradienty wspierają przezroczystość. Można tego użyć na przykład podczas układania w stos Wielu tła, aby stworzyć efekty zanikania na obrazach tła.

background: linear-gradient(to right, rgba(255,255,255,0) 20%,
              rgba(255,255,255,1)), url(http://foo.com/image.jpg);

4

Author: gras,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-06-06 18:08:53

Jest to możliwe przy użyciu składni multiple background:

.example3 {
    background-image: url(../images/plus.png), -moz-linear-gradient(top,  #cbe3ba,  #a6cc8b);
    background-image: url(../images/plus.png), -webkit-gradient(linear, left top, left bottom, from(#cbe3ba), to(#a6cc8b));
}

Czytałem o tym w Oto jedno rozwiązanie .

0

Author: Chris Peckham,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-07-13 12:22:45

Przezroczyste obrazy nie są jeszcze standardem CSS, ale są obsługiwane przez większość nowoczesnych przeglądarek. Jest to jednak część zalecenia W3C CSS3. Implementacja różni się w zależności od klienta, więc będziesz musiał użyć więcej niż jednej składni dla kompatybilności między przeglądarkami.

Http://www.handycss.com/effects/transparent-image-in-css/

-1

Author: Sohail Bashir,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-06-04 12:40:39

score 37 · Accepted Answer

Należy pamiętać, że gradient CSS jest w rzeczywistości wartością obrazu , a nie wartością koloru, jakiej niektórzy mogą się spodziewać. Dlatego odpowiada background-image konkretnie, a nie background-color, czyli całemu background skrótu.

Zasadniczo, to, co naprawdę próbujesz zrobić, to warstwy dwa obrazy tła: obraz bitmapowy nad gradientem. Aby to zrobić, należy podać oba z nich w tej samej deklaracji, oddzielając je przecinkiem. Najpierw określ obraz, a następnie gradient. Jeśli określisz kolor tła, kolor ten będzie zawsze malowany pod najbardziej u dołu obrazu, co oznacza, że gradient pokryje go dobrze i będzie działał nawet w przypadku awaryjnego.

Ponieważ uwzględniasz prefiksy dostawców, musisz to zrobić raz dla każdego prefiksu, raz dla prefiksu bez prefiksu i raz dla awaryjnego (bez gradientu). Aby uniknąć konieczności powtarzania innych wartości, użyj właściwości longhand¹ zamiast background Skrót:

#mydiv .isawesome { 
    background-color: #B1B8BD;
    background-position: 0 0;
    background-repeat: no-repeat;

    /* Fallback */
    background-image: url('../images/sidebar_angle.png');

    /* CSS gradients */
    background-image: url('../images/sidebar_angle.png'), 
                      -moz-linear-gradient(top, #ADB2B6 0%, #ABAEB3 100%);
    background-image: url('../images/sidebar_angle.png'), 
                      -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ADB2B6), color-stop(100%, #ABAEB3));
    background-image: url('../images/sidebar_angle.png'), 
                      linear-gradient(to bottom, #ADB2B6, #ABAEB3);

    /* IE */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ADB2B6', endColorstr='#ABAEB3', GradientType=0);
}

Niestety nie działa to poprawnie w IE, ponieważ używa filter do gradientu, który zawsze maluje nad tłem.

Aby obejść problem IE, możesz umieścić filter i obraz tła w oddzielnych elementach. To wyeliminowałoby moc CSS3 wielu tła, choć, ponieważ można po prostu zrobić warstw dla wszystkich przeglądarek, ale to kompromis trzeba zrobić. Jeśli nie musisz obsługiwać wersji IE, które nie zaimplementuj standardowe gradienty CSS, nie masz się czym martwić.

¹_{technicznie, deklaracje background-position i background-repeat dotyczą obu warstw, ponieważ luki są wypełniane przez powtarzanie wartości zamiast zaciśniętych, ale ponieważ background-position jest jej wartością początkową i background-repeat nie ma znaczenia dla gradientu pokrywającego cały element, nie ma to większego znaczenia. Szczegóły obsługi warstwowych deklaracji tła można znaleźć tutaj .}