CSS：设置背景图尺寸与位置时不影响背景色的方法

完全没问题，CSS的多背景特性支持给每个背景层单独设置属性，只要你按照背景声明的顺序来对应设置background-size、background-position这些属性就行。

举个例子，你的代码里背景是[SVG图片], [渐变背景]的顺序，那在设置background-size和background-position时，用逗号分隔两个值，第一个值对应SVG图片，第二个值对应渐变背景（也就是你说的背景色层）。

修改后的代码如下：

.content{ 
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1' viewBox='0 0 10 6'%3E%3Cpath d='M1.7.3A1 1 0 1 0 .3 1.7l4 4a1 1 0 0 0 1.4 0l4-4A1 1 0 1 0 8.3.3L5 3.58 1.7.29z' fill='red'/%3E%3C/svg%3E"),
              linear-gradient(to bottom, white, #999); 
  background-repeat: no-repeat; 
  /* 第一个值对应SVG图片，第二个对应渐变背景 */
  background-size: 20px, 100% 100%; 
  background-position: 2px 5px, center; 
  height: 50px; 
  width: 200px; 
  border: 1px solid grey; 
}

关键说明： #

• background-size: 20px, 100% 100%;：20px是SVG图片的尺寸，100% 100%让渐变背景铺满整个元素的宽高，完全不受图片尺寸的影响。
• background-position: 2px 5px, center;：2px 5px是SVG图片的定位，center是渐变背景的定位（其实渐变铺满元素后，这个位置值不会影响显示效果，你也可以写0 0之类的等价值）。
• 其他背景相关属性比如background-repeat也能用同样逻辑设置，比如想让渐变重复、图片不重复，就写background-repeat: no-repeat, repeat;。

这样设置后，SVG图片的尺寸和位置完全独立，渐变背景会正常铺满整个元素，两者互不干扰~

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