此标题区域如何在所有浏览器上工作?

发布于 2024-12-01 19:10:54 字数 227 浏览 1 评论 0原文

我刚刚在这里看到了这个浏览器:

http://www.dietriffic.com/

现在,绿色部分顶部,无论我如何调整浏览窗口(Chrome)的大小,它要么完全填满它,要么只是不显示全部。它是如何做到这一点的?这是一个图像吧?他们不可能为每种屏幕尺寸做好准备,不是吗?

谢谢!

I just saw this browser here:

http://www.dietriffic.com/

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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

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

评论(2

盛夏尉蓝 2024-12-08 19:10:55

它使用 水平和垂直重复的图像 横跨整个标题的宽度:

在此处输入图像描述

和 a居中、不重复、大部分透明 PNG 对于标题中间的发光效果:

在此处输入图像描述

It uses a horizontally- and vertically-repeated image across the width of the entire header:

enter image description here

and a centered, non-repeated, mostly-transparent PNG for that glow effect in the middle of the header:

enter image description here

御弟哥哥 2024-12-08 19:10:55

使用 Firebug:

绿色框是

<div id="header_area" class="full_width">

它使用大小为 50x50 的重复背景图像(绿色),它们用“图块”填充整个 div。 div 始终适合浏览器视口宽度的事实是“full_width”类:

.full_width {
    clear: both;
    width: 100%;
}

它是进行缩放的 width: 100%

除此之外,居中的文本不是图像,而是真实的文本。它们实现了

margin: 0 auto;

容器元素的居中对齐。

Using Firebug:

The green box is

<div id="header_area" class="full_width">

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":

.full_width {
    clear: both;
    width: 100%;
}

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

margin: 0 auto;

on the container element.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文