1

首先，我想告诉你们，我不是设计师，也不是 css/xhtml 编码器。我在为我的一个朋友问这个问题，他正在一个有对角渐变的网站上工作（这基本上意味着渐变在 X 和 Y 方向上），所以他在切片图像时遇到了问题这样他就可以在背景中填充切片图像，从而保持 X 和 Y 两个方向的梯度。

所以，就像，如果梯度只在 X 方向上，我们通常会切片一个垂直的 1px 宽度的图像。类似地，如果梯度仅在 Y 方向上，那么我们通常切片一个水平 1px 高度的图像。但是如果梯度同时在 X 和 Y 方向上呢？在这种情况下，我们将如何对图像进行切片，或者我们如何在 CSS/XHTML 中实现它？

多谢

普赫拉吉

4

2 回答 2

4

你的朋友应该考虑用 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%;
}
于 2010-11-14T00:15:11.900 回答
0

Simple. Don't splice it at all. You could simply take the background image as a whole and use CSS' background directive in your body tag. Only issue I could see you running into is the width of your gradient image. If it's (for example) 1024px wide and the client is rocking 1920px they'll see a lot of white. It's a little hard to answer without knowing who your monitor demographic is and your layout.

于 2010-11-13T03:00:19.737 回答