如何为标题添加另一个背景img或颜色？

Question

​

.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

Answer 1

对于所有背景属性，可以使用任意多个层。

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

你可能一直对此有问题，因为你的图像看起来像是透明的背景，但实际上它只是一个方格背景

​

.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>

​