事情是这样的:要求做一个详情框,背景自适应文字,文字是动态获取的,像这样:
首先想到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;---把背景图片放大到适合元素容器的尺寸,图片比例不变。
注:真的要多看文档啊深入看文档,漏掉需要的一点东西往往都会兜超大一个圈的……