css的background-size属性

事情是这样的：要求做一个详情框，背景自适应文字，文字是动态获取的，像这样：

首先想到background属性，background: url("../../assets/home/bubble.png") no-repeat; 由于文字较多，图就不够长，赶紧百度背景图拉伸的办法，忘了怎么百度的了，反正得出结论——背景图无法拉伸只能平铺（这当然是错的！！！）然后我就另想出路了……
如果背景图的路走不通，那只能用绝对定位了，子绝父相，获取子元素高度来决定父元素高度——只能用js来写了，咔咔咔一通document.querySelector（***）.offsetHeight，还真让我给写出来了，正得意呢，隔壁angle瞥了一眼我的代码，“你可真是绝了在react里面写js，balabala”总之就是一顿表（xian）扬（qi），然后问我是什么需求把我逼到这个份上，说完之后跟我说不到万不得已千万不要在react里面写原生代码，会出问题（可是我真的以为这已经是万不得已了……）

又仔细查了一下background属性之后，发现被我漏掉的background-size属性，又把我天（wu）衣（bi）无（yu）缝（chun）的代码改成了简单的background-size：cover，一句css就解决了问题！我恨啊…… 仔细一瞅 哎？这个尖尖怎么是歪的？

我抓耳挠腮的样子果然又引起了angle的注意，“你改成100%试试”……

结果是我终于还原了设计图，附上我学到的新知识：

background-size值为cover和值为100%的区别：
background-size：100% 100%;---按容器比例撑满，图片变形； 
background-size：cover;---把背景图片放大到适合元素容器的尺寸，图片比例不变。

注：真的要多看文档啊深入看文档，漏掉需要的一点东西往往都会兜超大一个圈的……