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

Question

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

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

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

Pukhraj

Answer 1

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

Answer 2

Ваш друг должен подумать об этом с помощью 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; 
} 

Или вы можете использовать фон-размер:

Пример: 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%; 
}