如何使用 CSS 在网页背景中添加重复的 png 图像

Question

我正在使用以下CSS代码：

body  
{
    background-image: url(img/tasky_pattern.png);  
}

我的图像地址是 downloads/dist/image/tasky_pattern.png 。我不知道我哪里出错了以及如何纠正这一点。

谢谢。

Answer 1

您需要

确保您的图像存在于您的文件夹中，因此请将您的图像上传到./img/文件夹。然后，您可以使用以下CSS代码：

body
{
    background-image: url("img/tasky_pattern.png") repeat;
}

如果您无法将图像上传到./img/文件夹，您可以将图像上传到免费文件托管网站，然后改用他们提供的链接。

Answer 2

您链接到 img/tasky_pattern.png 的图像位于名为 downloads/dist/image/tasky_pattern.png 的文件夹下，但您使用了 img 而不是图像

看看如何修复这个错别字。这可能就是您的图像不显示的原因。

要检查文件引用，请在 chrome 和检查元素中打开您的页面。找到显示背景图像的 css 代码：url（img/tasky_pattern.png）; ，然后导航到目标。这将在浏览器地址栏中为您提供完整的URL，并显示路径名出错的地方

Answer 3

CSS 后台默认行为正在重复...

您可以指定 EXIS

background: url('image_path'); /* it repeats itself */
// or //
background: url('image_path') repeat-x ; /* it repeats only x-exis */
// or //
background: url('image_path') repeat-y ; /* it repeats only y-exis */
// or //
background: url('image_path') no-repeat; /* no repeats */

查看演示