2021-04-02 CSS,设置背景图和背景颜色

如何同时设置背景图和背景颜色

很多时候我们会遇到一种问题，背景色和背景图无法同时写在一条语句上
第一种，写在style里

<div
                        className={styles['HomeWrapContent-fourPartItem']}
                        style={{
                          background: `url(${static_host}/images/${item.img}.png) 100%  no-repeat`,
                          backgroundSize: '22%',
                          backgroundColor: 'white'
                        }}
                      >
                        <p>{item.title}</p>
                        <span>{item.sentence}</span>
                      </div>

同时设置背景图和背景颜色的时候，背景图是一定会比颜色的层级高的，如果遇到需要颜色在图片上面的时候，就用一个固定定位，将一个div放在图片上面吧~