Как создать CSS3-градиентный фон

Я работаю над веб-сайтом из PSD. В разделе я видел, что есть смешанный цвет фона. Я думаю, что это будет лучший способ сопоставить цвет, если я могу использовать градиент CSS3. Но я не могу использовать градиент CSS3. Итак, я получил помощь «онлайн-генератор фона градиента CSS3 из изображения». Слушай, я хочу код этого фонового изображения: Как создать CSS3-градиентный фон

Но с онлайн-генератора я получил это:

Посмотрите, два изображения не совпадают. На первом изображении есть огромный белый цвет почти слева направо, отсутствующий на втором изображении. Посмотрите, пожалуйста, первое изображение снова:

Я использовал этот online generator загрузив файл и скопируйте и вставьте код CSS, который он при условии:

Вы можете проверить результат на этой ссылке также есть тестовая ссылка: http://abidhasan.zxq.net/test/

Итак, как я могу получить идеальный CSS3 и кросс-браузерный код для первого изображения этого вопроса?

Фактический раздел СДП является:

Не градиент CSS3 лучший и самый короткий путь, чтобы сделать фон этого раздела?

источник

2013-05-24 user1896653

Мне кажется, что в генераторе у вас установлен линейный градиент. Попробуйте переключить его на радиальный градиент. – zazvorniki

Да, градиент CSS - лучший и самый короткий способ сделать фон. Похоже, вы нашли ошибку в инструменте генератора градиента, который вы используете; вы можете сообщить об этом им. В то же время лучше всего просто перетащить ручки вокруг генератора вручную, пока вы не получите градиент, который выглядит так, как вы хотите. – Spudley

http://www.css3files.com/gradient/ радиальный градиент –

Я использовал ColorZilla's Gradient Editor и расширение ColorZilla Chrome, чтобы найти верхнюю и нижнюю границы градиентов, которые вы разместили. Затем я использовал набор правил CSS, сгенерированный градиентным редактором, для создания двух элементов div. Я вложил один внутри другого и дал внутренний div opacity: .5.

HTML:

<div class="gradient" style="width: 400px; height: 100px;"> 
    <div class="topGradient" style="width: 400px; height: 100px; opacity: 0.5"></div> 
</div>

CSS:

.topGradient { 
    background: rgb(204,204,204); /* Old browsers */ 
    background: -moz-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(255,255,255,1) 22%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(204,204,204,1)), color-stop(22%,rgba(255,255,255,1))); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(255,255,255,1) 22%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(255,255,255,1) 22%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(255,255,255,1) 22%); /* IE10+ */ 
    background: linear-gradient(to bottom, rgba(204,204,204,1) 0%,rgba(255,255,255,1) 22%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#ffffff',GradientType=0); /* IE6-9 */ 
} 

.gradient { 
    background: rgb(224,224,224); /* Old browsers */ 
    background: -moz-linear-gradient(left, rgba(224,224,224,1) 0%, rgba(255,255,255,1) 35%, rgba(204,204,204,1) 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(224,224,224,1)), color-stop(35%,rgba(255,255,255,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(left, rgba(224,224,224,1) 0%,rgba(255,255,255,1) 35%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(left, rgba(224,224,224,1) 0%,rgba(255,255,255,1) 35%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(left, rgba(224,224,224,1) 0%,rgba(255,255,255,1) 35%,rgba(204,204,204,1) 100%); /* IE10+ */ 
    background: linear-gradient(to right, rgba(224,224,224,1) 0%,rgba(255,255,255,1) 35%,rgba(204,204,204,1) 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e0e0e0', endColorstr='#cccccc',GradientType=1); /* IE6-9 */ 
}

Конечный результат был таков:

enter image description here

Вот JSFiddle.

источник

2015-02-06 20:50:05 alex

Как создать CSS3-градиентный фон

ответ

Смежные вопросы