我正在尝试为我的网站创建 header ，但由于我是 HTML 和 CSS 的新手，所以遇到了一些困难。我想创建一个具有相同字体和背景的横幅，如下所示。它们由某种颜色和 44% 不透明度的图案覆盖组成，我不确定该怎么做。
我最初将页眉作为图像上传，但有人告诉我在网站上使用大图像是不好的，因为它会延长加载时间。所以我尝试通过代码创建它。如果有人可以帮助复制下面的标题，我将不胜感激。谢谢。
最佳答案
在这里你有你的 fiddle 更新:FIDDLE
我已经修复了 html 中的一些问题，例如未关闭的标签(您的 header )，现在“容器”适本地包含了横幅。
因此，现在您只需添加具有您想要的图案的背景图像，然后(就像您所做的那样)调整文本的不透明度值。
#container {
background-image:url(http://zimasolutions.com/Images/pattern.png);
repeat:repeat;
}
对背景图像使用重复选项，这样您只需要一点图像。
我临时上传了我用作示例的图像 pattern.png。我为您链接的图像取了样本。几个小时后，我可能会删除该图片。
已编辑:如果您想要图案图像覆盖文字而不是下方的文字，可能会更复杂。您可以将容器绝对定位在横幅上，但在这种情况下，您可能需要使用图像编辑器(如 photoshop)更改图像的不透明度。
关于html - 如何在 CSS 中创建图案叠加层，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28346095/