Вопрос по html, css – Как применить несколько радиальных градиентов CSS к одному элементу

3

У меня есть следующий стиль, примененный к моемуdiv элемент:

background-image: -moz-radial-gradient(50% -10%, ellipse closest-corner, rgba(5, 5, 5, 0.7), rgba(0, 0, 0, 0) 100%);

Это имеет желаемый эффект (будучи внутренней тенью только на вершинеdiv). Я хотел бы применить тот же эффект в нижней частиdiv, Следующая строка делает это хорошо, но кажется, что она перекрывает первую, поэтому я могу получить только одну или другую.

background-image: -moz-radial-gradient(50% 110%, ellipse closest-corner, rgba(5, 5, 5, 0.7), rgba(0, 0, 0, 0) 100%);

Может кто-нибудь показать мне, как я могу иметь несколько фонов с радиальным градиентом на элемент? Я заметил, что webkit может сделать это легко, но я ищу кросс-браузерную реализацию / альтернативу.

Спасибо

Ваш Ответ

4   ответа
1

background имущество. Но имейте в виду, что порядок свойств чрезвычайно важен.

background:
    radial-gradient(circle at top left, transparent 15px, #58a 0) top left,
    radial-gradient(circle at top right, transparent 15px, #58a 0) top right,
    radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right,
    radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;

background затем -size и -repeat, иначе это не сработает. Мне потребовалось около 30 минут, чтобы получить его. Надеюсь, это будет полезно для кого-то.

5

background: radial-gradient(top left, 
            rgb(205, 230, 235) 34%, 
            transparent 34%), 
        radial-gradient(center, 
            rgb(205, 230, 235) 34%, 
            transparent 34%);

Вы можете видеть это работает наhttp://dabblet.com/gist/2759668

1

чтобы пропустить другой фон:

   background-image: radial-gradient(closest-corner at 40% 70%,#FFFFFF 0%, rgb(171,171,171),50%,transparent),
                     radial-gradient(closest-corner circle at 80% 20%, #FFFFFF 0%, rgb(171,171,171),20%,transparent),
                     radial-gradient(closest-corner circle at 10% 10%, #FFFFFF 0%,rgb(171,171,171) 25%);
спасибо, но я уже делаю с помощьюrgba значение вместо простоrgb,a часть является альфа и установлена на 0. Ответ выше был тем, что я искал (то есть разделение их запятой вместо нескольких записей CSS) hofnarwillie
4

Что-то вроде этого :

background-image: url(),url(), url();

Конечно, вместо URL вы можете поставить градиент.

И все современные браузеры поддерживают эту функцию (то есть IE не поддерживает).

Чтобы сделать его доступным в IE, вы можете использоватьpie.htc

выглядит вполне законно. :)
Спасибо, Эрик, это именно то, что мне было нужно. веселит. Хотя pie.htc не поддерживает радиальные градиенты, это хорошая работа. hofnarwillie
заменить & quot; новые браузеры & quot; с & quot; современными браузерами & quot; - IE9 квалифицируется как новый, который я бы сказал ...

Похожие вопросы