背景图片铺满屏幕-------Day85

你有没有遇到过一种情况,你特别喜欢一张图片,但是可惜的是这张图片就小了那么一丁点,但有小片留白啊,那就不好看了啊,你有没有过呢,我不知道,但我真的就碰到了,我特喜欢那张图,就想让它做背景,可就小了点,于是我就想办法了。


background-size:cover;

background-size:contain;

两个看起来差不多,实际原理还真不一样:

cover,翻译过来就是“覆盖”,这是纯正的背景铺满了元素,它会比较图片的长和宽,哪一个比较小,它就以哪一个为基准进行扩大,图片的本身宽高比例是不变的,当增大到比较小的值铺满相应方向的屏幕了才截止;

contain:翻译过来是“包含”,这个是说整个背景都在页面内,一般图片过大了才会用,跟size相同的是,本身的宽高比是不变的,而不用的则是它取的是两者中比较大的一个,以其为基准进行缩小,小到比较大的一方进入屏幕才截止;


当然在ie下,还有这经典的滤镜,这个暂没试用,我就分享下别人写的代码吧。

filter: progid:DXImageTransform
.Microsoft.AlphaImageLoader
(src='.myBackground.jpg', 
sizingMethod='scale');


这样图片只要相差不是太离谱,想用哪个用哪个嘛



  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值