Как сделать половину блока в фоне?

Question

[barabash2090]

Есть блок.70% процентов фона блока должны быть синие, а 30% просто прозрачный.Как реализовать?Через background-gradient()?

Comments

[Виталий Першин]

Есть же куча онлайн генераторов градиента...

[xonar]

Виталий, Зачем вы советуете генераторы, когда человек ручками не может это сделать. Сначала пусть изучит, а дальше идёт лёгким путём.

[Виталий Першин]

xonar, Зачем вы пишите за него, если советуете изучать самому? У вас это не вызывает диссонанс или пообщаться не с кем?

[xonar]

Виталий, Так тут он помощи попросил, как сделать. Ему показали, надеюсь заинтересуется, что и как. Но, вот дайте ему в руки онлайн генератор и он навсегда останется на онлайн генераторе.

[Lord_Dantes]

xonar, что изучить? Сетку RGBA? Или можем как правильно составлять цветовые коррекции. Виталий дал совет которому автор научился бы это делать.

[xonar]

slave, Ага, а ещё что есть не только линейный, но и радиальный. А не тупо в генераторы цвета подбирать и копипастить.

Ну хз, у каждого своё мнение.

[Lord_Dantes]

xonar, ну так тип градиента он и узнает в генераторе как бы и какие свойства есть. вы первый код где писали? в блокноте??

[xonar]

slave, в notepad)) и ни разу не пользовался генератором кстати для градиентов. Методом проб и ошибок.

[Lord_Dantes]

xonar, кхм я думал все разработчики подглядели хоть раз в таблицу умножений или в вашем случае как правильно делать те или иные вещи. Иначе так далеко не заедете, если будете развиваться методом проб и ошибок))

[xonar]

slave, Я же не сказал, что я документацию не читаю) и не гуглю) но, руку набивать чтоб помнила как нужно писать лучше вручную же, чем сразу на генераторах. Я практически полностью уверен, что кто на генератор сразу попадёт в итоге на нём и останется. Я считаю, что это плохо) Чтот много Я. Ладно закрыли тему)

[Lord_Dantes]

xonar, так а чем генератор плох? Чем вообще генератор может быть плох? тем как и нейронная сеть которая верстает сайт пока вы пьете чай?)

[xonar]

slave, Речь шла не о том, что генератор это плохо) Речь шла о том, что лучше самому понять хотя бы, как это работает. Посидит человек на генераторе 2 дня, спросишь в любой момент, а как то и то сделать? А он без генератора и не вспомнит скорее всего)

[Ankhena]

xonar, лучше ответ свой поправьте наконец нормально

[Виталий Першин]

xonar, Я не просто так упомянул генераторы. У человека есть четко сформулированная задача:
70% цвета 30% прозрачности и все это в background-gradient
Если бы он хотя бы в поисковике ввел background-gradient на первой же странице наткнулся бы на генератор. Поэтому у меня в голове не укладывается, как можно задавать такие вопросы, если ответ мало того что можно найти, так еще и есть готовые генераторы. Из этого можно сделать вывод, что он не хочет учить этот материал, он хочет чтобы сделали за него и ткнули носом в правильное решение. Неужели нужно объяснять такие очевидные вещи?

[xonar]

Виталий, Тогда таким тут нужно запрещать водиться. Судя по его вопросам, он хочет чтоб за него делали абсолютно всё.

[Виталий Першин]

xonar, Вот и я об этом. Для таких случаев как раз есть кнопка "жалоба" с пунктом "легко ищется в поисковике"

Answer 1

[xonar]

background: linear-gradient(to right, #005eea 70%, transparent 70%);

Comments

[Ankhena]

Только так:

background: linear-gradient(to right, #005eea 70%, transparent 70%);

[xonar]

Ankhena, С телефона писал ошибся. Тогда уже вот так

transparent 30% ))

[Ankhena]

xonar, 70
Любое число меньше 70 сработает для четкой границы. Но правильное 70.
Потому что 30 это не сколько нужно покрасить, а где находится точка перехода.

Answer 2

[Brad9aga]

Answer 3

[inkShio]

Можно через :before и :after сделать