• 欢迎大家分享资料!前往留言板评论即可!

css的background-size属性

合宙 模组资料网 2年前 (2021-05-15) 277次浏览 已收录 0个评论 扫描二维码

事情是这样的:要求做一个详情框,背景自适应文字,文字是动态获取的,像这样: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就解决了问题!我恨啊…… 仔细一瞅 哎?这个尖尖怎么是歪的?

css的background-size属性

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

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

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

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


转载请注明原文链接:css的background-size属性
喜欢 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址