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

Janfiveee_

于 2021-04-02 17:35:27 发布

阅读量548

点赞数

CC 4.0 BY-SA版权

分类专栏：基础文章标签： css

本文链接：https://blog.youkuaiyun.com/Janfiveee_/article/details/115404549

基础专栏收录该内容

14 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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