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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏九彩拼盘的叨叨叨

jQuery 复制表单 Bug 及修复

当 jQuery 复制表单时,会漏复制 textarea 和 select 的值。更详细的描述见 http://bugs.jquery.com/ticket/3...

641
来自专栏Young Dreamer

VUE中的v-if与v-show

1.共同点 都是动态显示DOM元素 2.区别 (1)手段:v-if是动态的向DOM树内添加或者删除DOM元素;v-show是通过设置DOM元素的display样...

2117
来自专栏vue学习

29、地址列表

(1)关于颜色的改变前面在做轮播图的时候我们已经处理过,当时我们的解决方法是用在开发中工具中找到它的class类名,然后我们使用vue的穿透选择器改变这个类名的...

1404
来自专栏张善友的专栏

jQuery操作Select

jQuery是如何控制和操作select的。先看下面的html代码 <select id="test"> <option value="1">选项一<optio...

2177
来自专栏Python爬虫与算法进阶

为什么Selenium点不到元素

最近做了许多登陆项目,我会优先选择使用requests来模拟请求,但是有些参数实在是很难获取,这个时候我会使用Selenium,也还是遇到了各种坑,也算是见识到...

1350
来自专栏无所事事者爱嘲笑

Vue中scoped css和css module比较

3672
来自专栏娱乐心理测试

关于jQuery的浅谈学习

1354
来自专栏Samego开发资源

QT Creator Usage

1954
来自专栏DannyHoo的专栏

xcode7中KSImageNamed-Xcode-master插件无法使用问题的解决

Xcode 升级到7之后VVDocumenter-Xcode,OMColorSense,KSImageNamed等一系列的插件失效的解决办法,以及不小心误点了...

691
来自专栏技术墨客

React中的模式对话框 转

在16.x版本之后React提供了Protals功能来解决模式对话框不在Dom根节点导致的一些BUG。除了Protal还有更多的方法去解决这些问题,本文来自Da...

773

扫码关注云+社区