CSS 渐变图像大小?
我知道制作渐变图像的最佳方法是将其宽度设置为 1 并让它重复,但我对高度应该是多少感到困惑?
如果观众在巨大的显示器或电视屏幕或其他东西上,它是否应该很大?有没有办法让它像 1x10 并且看起来正常?
另外,在不使用 CSS3 的情况下做圆角之类的东西......使用图像 - 这在流体布局中可能吗?
这是我正在谈论的渐变。 this 是 Teamliquid.net。它的高度只有 33px,但你看不出它在 y 轴上重复......?
I know that the best way to make a gradient image is to have its width set as 1 and just let it repeat, but I'm confused as to what the height should be?
Should it be really big in case the viewer is on a huge monitor or TV screen or something? Is there a way to have it be just like 1x10 and look normal?
Also, doing rounded corners and stuff like that without using CSS3... using an image - is that possible in a fluid layout?
Heres a gradient thing I'm talking about. this is the background gradient used on Teamliquid.net. It's height is only 33px, yet you can't tell that its repeating on the y axis...?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
渐变的高度为 33px,因为导航栏的高度为 33px。
当你有垂直渐变时,这意味着你需要水平重复它,这意味着你需要 1px 的宽度和你想要的渐变高度的高度。
The height of the gradient is 33px, because the navbar has a height of 33px.
When you have a vertical gradient, that means you need to repeat it horizontally and that means you need a width of 1px and a height of the gradient height you want to have.
我建议使用 CSS3 来实现这种效果。有一些很棒的生成器。我做一些网页设计,我使用的只是 CSS 渐变。另外,如果您使用图像,则服务器必须处理另一个 http 请求。
http://www.colorzilla.com/gradient-editor/
编辑:< /强>
这也是我对圆角所做的事情。
http://www.cssportal.com/css3-rounded-corner/
他们工作非常适合流体布局。
I would just recommend using CSS3 for this effect. There are some great generators. I do some web design and all I use is CSS gradients. Also, if you use an image, it is one more http request the server must handle.
http://www.colorzilla.com/gradient-editor/
EDIT:
Here's what I do for rounded corners as well.
http://www.cssportal.com/css3-rounded-corner/
They work great for fluid layouts.