最近中文字幕高清中文字幕无,亚洲欧美高清一区二区三区,一本色道无码道dvd在线观看 ,一个人看的www免费高清中文字幕

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定

純CSS實(shí)現(xiàn)響應(yīng)式背景圖

標(biāo)簽:
Html/CSS

一、插入图片
1.插入一张图片,大小随机
2.body,html宽度100%;
3.img{ display:block; width:100%; max-width:100%; height:100%; }
注:宽度100%可以实现效果,但是高度自适应却有点复杂。因为高度的百分比是相对于整个html的,所以要给html,body加上100%。

二、设置background-image
1.给body加上背景图片
2.背景图片的size属性值是cover
3.宽高百分比

说明:这两种方法写出来的都是响应式的,也就是图片的宽度高度随着窗口缩放,可能会产生图片压缩的现象,但是图片是紧紧贴着可视区的。任君揉捏~
其中有几个知识点要说下:
1.高度自适应;
2.img是行内元素。不是块级元素。如果不给img加上block,页面上会出现一点点空隙,图片不能完全贴合。

點(diǎn)擊查看更多內(nèi)容
5人點(diǎn)贊

若覺(jué)得本文不錯(cuò),就分享一下吧!

評(píng)論

作者其他優(yōu)質(zhì)文章

正在加載中
感謝您的支持,我會(huì)繼續(xù)努力的~
掃碼打賞,你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開(kāi)微信掃一掃,即可進(jìn)行掃碼打賞哦
今天注冊(cè)有機(jī)會(huì)得

100積分直接送

付費(fèi)專(zhuān)欄免費(fèi)學(xué)

大額優(yōu)惠券免費(fèi)領(lǐng)

立即參與 放棄機(jī)會(huì)
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

舉報(bào)

0/150
提交
取消