Как применить несколько радиальных градиентов CSS к одному элементу
У меня есть следующий стиль, примененный к моему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)
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 минут, чтобы получить его. Надеюсь, это будет полезно для кого-то.
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
чтобы пропустить другой фон:
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)Что-то вроде этого :
background-image: url(),url(), url();
Конечно, вместо URL вы можете поставить градиент.
И все современные браузеры поддерживают эту функцию (то есть IE не поддерживает).
Чтобы сделать его доступным в IE, вы можете использоватьpie.htc