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