Как мы можем внедрить диагональный градиент PSD в наш код CSS XHTML? - PullRequest
Новая
       20

Как мы можем внедрить диагональный градиент PSD в наш код CSS XHTML?

1 голос
/ 13 ноября 2010

Прежде всего, я хочу сказать вам, ребята, что я не дизайнер и не кодер css / xhtml. Я задаю этот вопрос одному из моих друзей, он работает над сайтом с диагональным градиентом (это в основном означает, что градиент находится в обоих направлениях X и Y), поэтому у него возникают проблемы с нарезкой изображения это так, что он может заполнить нарезанное изображение в фоновом режиме таким образом, чтобы сохранить градиент в обоих направлениях X и Y.

Таким образом, это похоже на то, что если градиент направлен только в направлении X, то мы обычно нарезаем вертикальное изображение шириной 1px. Точно так же, если градиент только в направлении Y, тогда мы обычно нарезаем горизонтальное изображение высотой 1px. Но что, если градиент находится в обоих направлениях X и Y? В этом случае, как мы будем нарезать изображение или как мы можем реализовать его в CSS / XHTML?

Большое спасибо

Pukhraj

Ответы [ 2 ]

4 голосов
/ 14 ноября 2010

Вашему другу следует подумать о том, чтобы сделать это с помощью CSS, если он / она в порядке с ним, работающим только в современных браузерах без IE.

Пример: http://jsfiddle.net/h9rpE/2/

html, body {
    font: bold 20px Helvetica, Arial, sans-serif;
    height: 100%;
}
body {
    background: white -moz-linear-gradient(135deg, black, white) fixed;
    background: white -webkit-gradient(linear, left top, right bottom, from(white), to(black)) fixed;
}

Или вы можете использовать background-size:

Пример: http://jsfiddle.net/rLttj/2/

body {
    background: white url('http://dropbox.smallparade.com/grad.jpg') no-repeat fixed;
    -moz-background-size: 100% 100%; -webkit-background-size: 100% 100%; background-size: 100% 100%;
}
0 голосов
/ 13 ноября 2010

Simple. Не сращивайте это вообще. Вы можете просто взять фоновое изображение целиком и использовать директиву CSS background в своем теге body. Единственная проблема, с которой я столкнулся, это ширина вашего градиентного изображения. Если он (например) имеет ширину 1024 пикселя, а клиент качает 1920 пикселей, он увидит много белого. Немного сложно ответить, не зная, кто является вашим демографическим монитором и вашим макетом.

...