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

最新推荐文章于 2025-07-13 23:33:13 发布

原创最新推荐文章于 2025-07-13 23:33:13 发布 · 568 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

基础专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何在CSS中同时设置背景图片和背景颜色，解决背景图覆盖背景色的问题。通过使用内联样式，设置了背景图片的URL、定位及大小，并结合背景颜色，实现了背景色在图片上方的效果。当需要颜色层在图片之上时，可以利用定位技巧，添加一个覆盖在图片上的色块层。

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

很多时候我们会遇到一种问题，背景色和背景图无法同时写在一条语句上
第一种，写在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>