可自定义图标与背景色的CSS重复图标背景实现

你可以通过CSS变量+内联SVG背景的方式实现需求，不用额外引入外部资源，直接通过元素的style属性就能修改星星颜色和背景底色，具体实现如下：

核心实现思路 #

1. 将Font Awesome的常规星星SVG转为内联格式，去掉固定填充色，改用currentColor或CSS变量控制星星颜色
2. 用background-image加载这个内联SVG，配合background-repeat实现重复图案
3. 通过CSS变量传递背景色，让外部style属性可以直接修改两种颜色

完整代码示例 #

<style>
  .star-bg {
    width: 100%;
    height: 300px;
    /* 背景色通过自定义CSS变量控制，默认浅灰色 */
    background-color: var(--bg-color, #eee);
    /* 内联SVG作为背景图，星星颜色继承元素的color属性 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M288 0c-11.4 0-22.8 3.5-32.1 10.5L99.7 150.4C47.2 181.2 0 239.4 0 304c0 114.9 93.1 208 208 208h160c114.9 0 208-93.1 208-208 0-64.6-47.2-122.8-109.7-153.6L320.1 10.5C310.8 3.5 299.4 0 288 0zm0 464c-79.5 0-144-64.5-144-144 0-60.8 39.6-112.5 94.8-131.1l11.9-4.7 47.2-100.1c5.2-11.1 16.3-18.1 28.8-18.1s23.6 7 28.8 18.1l47.2 100.1 11.9 4.7C402.4 207.5 442 259.2 442 320c0 79.5-64.5 144-144 144z' fill='%23%7B%7BcurrentColor%7D%7D'/%3E%3C/svg%3E");
    background-size: 40px 40px;
    background-repeat: repeat;
  }
</style>

<!-- 通过style属性直接修改星星颜色（color）和背景色（--bg-color） -->
<div class="star-bg" style="color: blue; --bg-color: red;"></div>

关键细节说明 #

• 内联SVG中的fill='%23%7B%7BcurrentColor%7D%7D'是URL编码后的fill='{currentColor}'，让星星颜色自动继承元素的color属性值
• --bg-color是自定义CSS变量，设置了默认浅灰色，通过元素的style属性可以直接覆盖
• 调整background-size的数值可以控制星星图案的大小，按需修改即可

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