如何仅为标题添加另一个背景图像或颜色？答案

【问题标题】：How Can i add another background img or color just for the title?如何仅为标题添加另一个背景图像或颜色？
【发布时间】：2021-05-10 01:53:55
【问题描述】：

.title{
    text-align: center;
    color: rgba(22, 20, 16, 0.658);
    border: dotted;
    border-radius:55px;
    /* border-collapse:collapse; */
    border-color: rgba(255, 105, 180, 0.514);
    text-align:auto;
    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');
    background-position: right;
    background-size: 210px;

<header>
            <h1 class="title">MENU <br> 
            VEG & NON-VEG </h1>
        </header>

https://w7.pngwing.com/pngs/442/979/png-transparent-sliced-orange-fruit-illustration-symmetry-area-food-symbol-app-orange-player-food-symmetry-color.png

【问题讨论】：

您能更具体地说明您要实现的目标吗？
我可能最简单的方法是将图像一起编辑成一张图像。没有标准的方法来做到这一点...... -edit ***我错了
您可以更具体地提出您的问题，这将帮助您获得所需的准确答案。你的意思是除了你已经应用的那个背景之外，你还需要一个额外的背景图片来指定标题文本吗？

标签： html css error-handling mobile-website

【解决方案1】：

您可以为所有背景属性使用任意数量的图层。

MDN 文档：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds

您可能对此有疑问，因为您的图片看起来像是透明背景，但实际上只是方格背景

.title{
    text-align: center;
    color: rgba(22, 20, 16, 0.658);
    border: dotted;
    border-radius:55px;
    /* border-collapse:collapse; */
    border-color: rgba(255, 105, 180, 0.514);
    text-align:auto;
    background-image: linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), 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');
    background-size: cover, 210px;
    background-position:  left, right;
    position: relative;
}

<header>
            <h1 class="title"> MENU <br> 
            VEG & NON-VEG </h1>
        </header>

【讨论】：