如何为title标题元素单独添加额外的背景图片或背景颜色

你现有的代码已经完成了单张背景图的配置，要额外添加背景色、或者新增多张背景图可以按下面的方案调整：

1. 添加单独的背景颜色 #

直接给.title类新增background-color属性即可，背景色默认渲染在背景图片的下层，如果你用的是带透明通道的PNG背景图，可以透出下层的背景色效果。如果不需要显示原有背景图，直接删除background-image相关属性即可。

2. 添加额外的背景图片 #

CSS原生支持多背景图配置，多个背景属性值用逗号分隔即可，排序在前的背景图会显示在上层：

.title{
    text-align: center;
    color: rgba(22, 20, 16, 0.658);
    border: dotted;
    border-radius:55px;
    border-color: rgba(255, 105, 180, 0.514);
    /* 新增背景色 */
    background-color: #fff3e6;
    /* 多背景图配置，逗号分隔，前上后下 */
    background-image: url('https://w7.pngwing.com/pngs/442/979/png-transparent-sliced-orange-fruit-illustration-symmetry-area-food-symbol-app-orange-player-food-symmetry-color.png'), url('你的第二张背景图地址');
    /* 对应每张图的位置，顺序和background-image保持一致 */
    background-position: right, left;
    /* 对应每张图的尺寸，顺序和background-image保持一致 */
    background-size: 210px, 100px;
    /* 禁止背景图重复平铺 */
    background-repeat: no-repeat;
}

额外优化建议 #

• 你原有代码里重复写了text-align属性，可以删掉无效的text-align: auto
• 如果希望背景仅贴合文字内容，而不是撑满整个父级宽度，可以给.title添加display: inline-block或者width: fit-content属性，配合margin: 0 auto可以保持元素居中显示。

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