我们如何在 css xhtml 代码中实现 PSD 的对角渐变？

发布于 2024-10-01 17:13:15 字数 349 浏览 8 评论 0原文

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

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

非常感谢

Pukhraj

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

手心的海 2024-10-08 17:13:15

你的朋友应该考虑使用 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%;
}

Your friend should consider doing this with CSS, as long as he/she is okay with it working only in modern, non-IE browsers.

Example: 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;
}

Or you could use background-size:

Example: 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 原文

暖阳 2024-10-08 17:13:15

简单的。根本不要拼接它。您可以简单地将背景图像作为一个整体，并在 body 标记中使用 CSS 的 background 指令。我看到你遇到的唯一问题是渐变图像的宽度。如果（例如）宽度为 1024 像素，并且客户端摇摆为 1920 像素，他们会看到很多白色。如果不知道您的显示器受众群体是谁以及您的布局，则有点难以回答。

回复收藏 0 原文

~没有更多了~