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，但是打开其他页面再回来这些样式就都不生效了，只剩一个背景图片了。

更多专业前端知识，请上 【猿2048】www.mk2048.com