react给一个div行内加背景图片并实现cover覆盖模式居中显示

具体background简写可以参考这篇文章.

这里注意，如果简写里要写background-size，则这里必须写 /  ,否则整个背景图片样式没有解析出来。

它和font以及border-radius里简写方式使用的/用法相似。/可以在支持这种写法的浏览器里在background-position后面接着写background-size。

<div style={{
                            display: 'inline-block',
                            width: '208px',
                            height: '100%',
                            background: `url("${thumb[0]}") center center / cover no-repeat`,
                        }}>
</div>

效果如图：

代码解析之后样式：（即使顺序不是这样写的解析出来也是这样的）

 如果分开写background其他设置，会出现一个问题，就是第一次加载图片是cover覆盖的，no-repeat，center center，但是打开其他页面再回来这些样式就都不生效了，只剩一个背景图片了。

• 还没有人评论，欢迎说说您的想法！

相关课程

Web前端入门教程

5905 9.8元

CSS3样式设计

4801 0元 限免

jQuery前端框架

5442 0元 限免