Вопрос:
У меня есть следующий стиль, применяемый к моему элементу 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 может сделать это легко, но я ищу реализацию/альтернативу перекрестного браузера.
Спасибо
Лучший ответ:
Просто разделите каждую запятую.
Что-то вроде этого:
background-image: url(),url(), url();
Конечно, вместо url вы можете использовать градиент.
И все современные браузеры поддерживают эту функцию (это значит, что IE не работает).
Чтобы сделать его доступным в IE, вы можете использовать pie.htc
Ответ №1
Вы просто перечислите их один за другим – вот так:
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
Ответ №2
Вы должны установить прозрачность прозрачного радиального градиента, чтобы пропустить другой фон:
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%);
