此标题区域如何在所有浏览器上工作?
我刚刚在这里看到了这个浏览器:
现在,绿色部分顶部,无论我如何调整浏览窗口(Chrome)的大小,它要么完全填满它,要么只是不显示全部。它是如何做到这一点的?这是一个图像吧?他们不可能为每种屏幕尺寸做好准备,不是吗?
谢谢!
I just saw this browser here:
Now, the green section at the top, no matter how I re-size my browsing window (Chrome), it manages to either fill it completely or just not show all of it. How does it do this? It is an image right? They couldn't have prepared for every screen size could they?
Thanks!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
它使用 水平和垂直重复的图像 横跨整个标题的宽度:
和 a居中、不重复、大部分透明 PNG 对于标题中间的发光效果:
It uses a horizontally- and vertically-repeated image across the width of the entire header:
and a centered, non-repeated, mostly-transparent PNG for that glow effect in the middle of the header:
使用 Firebug:
绿色框是
它使用大小为 50x50 的重复背景图像(绿色),它们用“图块”填充整个 div。 div 始终适合浏览器视口宽度的事实是“full_width”类:
它是进行缩放的
width: 100%
。除此之外,居中的文本不是图像,而是真实的文本。它们实现了
容器元素的居中对齐。
Using Firebug:
The green box is
It's using a repeating background image (the green) of size 50x50 that they use to fill the entire div with "tiles". The fact that the div always fits the browser viewport width is the class "full_width":
It's the
width: 100%
that does the scaling.Apart from that, the centered text is not an image, it's real text. They achieve the centered alignment with
on the container element.