如何为含渐变的背景图片设置CSS背景覆盖、居中及不重复属性？

直接用两种方法实现你要的效果：

方法一：拆分单独属性写法 #

把渐变和背景图都放在background-image中，然后单独设置背景的尺寸、重复、定位属性，同时确保body占满视口高度：

body {
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.50)), url("images/dms.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  min-height: 100vh;
  margin: 0;
}

方法二：使用background简写属性 #

在简写属性中按顺序补充所有需要的参数，注意background-size要跟在background-position后用/分隔，渐变和背景图可以共享这些属性：

body {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.50)), url("images/dms.jpg") center / cover no-repeat;
  min-height: 100vh;
  margin: 0;
}

为什么之前的写法无效？ #

你尝试在URL后加no-repeat是错误的写法，background简写属性里，背景重复是独立的参数，不是跟在URL后面的。当你只写渐变和URL时，background-repeat会使用默认值repeat，所以图片会重复显示。另外别忘了给body设置min-height: 100vh和清除默认margin，不然背景可能只覆盖内容区域，无法铺满整个视口。

内容的提问来源于stack exchange，提问作者codeninja