CSS фоновое изображение с горизонтальным градиентом - PullRequest
Новая
       25

CSS фоновое изображение с горизонтальным градиентом

0 голосов
/ 20 февраля 2012

У меня проблема с использованием изображения с градиентом в качестве фонового изображения для строки главного меню.

Это изображение для фона: enter image description here

Как вы, возможно, знаете,изображение имеет 2 градиента, во-первых, очень далеко влево и во-вторых 3/4 вправо.То, чего я хочу достичь, это так:

enter image description here

Кто-нибудь знает лучшую практику для этого?Я знаю, что единственная проблема в этом - ширина браузера, где я должен убедиться, что крайний левый угол начнется с очень светло-серого.Очень правый, будет темно-серый.

Еще одна проблема, которую я имею, - это центральный градиент главной страницы:

enter image description here

Это немногонемного проще и может быть сделано с помощью градиента CSS.Тем не менее, я пытался установить начало градиента от центра, за желтым делителем.

Если кто-нибудь знает, как лучше всего добиться этого, это было бы здорово.

СпасибоЗа вашу помощь заранее.

Ответы [ 2 ]

0 голосов
/ 20 февраля 2012

Чтобы достичь этого чисто в css, вы можете создать два контейнера с градиентом каждый, чтобы они могли изменять ширину, и это все равно выглядело бы одинаково.

Например

HTML: 

<div id="container">
   <div id="gradient1"></div>
   <div id="gradient2"></div>
</div>

CSS: 

.container { ..... }
.gradient1 {width:60%; float:left; GRADIENT}
.gradient2 {width:40%; float:left; GRADIENT}
0 голосов
/ 20 февраля 2012

Если просто использовать изображение в качестве фонового изображения? 

<div style="width: 896px; height: 20px;background-image: url(bg.png);"><div style="padding-left: 250px;">test</div></div>
...