Appearance | Customize
可以使用“外观”|“自定义”下的“附加css”功能修改页面中的大多数css样式。只需找到要覆盖的CSS元素,然后继续更改它们。
如果你把事情搞砸了,改变很容易就取消了
看了你的页面后,我发现你有两种可能CSS Elements, “s”容器或“节”。
将以下内容添加到CSS自定义中;
.section {background-image:url("https://www.chromahouse.com/wp-content/uploads/2019/07/purpleandblue.png");}
或
.container {background-image:url("https://www.chromahouse.com/wp-content/uploads/2019/07/purpleandblue.png");}
Note the . at the beginning of the line!
如果图像不可用,最好也设置背景色。
您还可以配置图像的显示、重复等方式,并将其设置为固定或浮动。
.container {
max-width: 100%;
background-image:url("/wp-content/uploads/2019/07/purpleandblue.png");
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
};
如果希望整个页面具有背景图像,请替换\'
container\' 带\'
body\'.
是的important to note 通过“附加CSS”选项所做的更改将覆盖现有CSS样式,因此应包括与被覆盖样式相关的任何元素。
您可能需要进行实验,以获得所需的背景图像,例如,分辨率非常高的屏幕会拉伸图像,可能会使其看起来很糟糕。对于更大分辨率的屏幕,您需要非常大的图像,这会消耗带宽并降低网站速度。如果你在谷歌上搜索“无缝背景”,你会发现更小的图像,重复时会产生无缝的背景图像效果。
欲了解更多信息,请查看;
https://www.w3schools.com/cssref/pr_background-image.asp
有关背景元素的更高级示例,请查看此项;
https://www.w3schools.com/cssref/pr_background-attachment.asp