首页 > 代码库 > 背景图片铺满屏幕-------Day85
背景图片铺满屏幕-------Day85
你有没有遇到过一种情况,你特别喜欢一张图片,但是可惜的是这张图片就小了那么一丁点,但有小片留白啊,那就不好看了啊,你有没有过呢,我不知道,但我真的就碰到了,我特喜欢那张图,就想让它做背景,可就小了点,于是我就想办法了。
background-size:cover;
background-size:contain;
两个看起来差不多,实际原理还真不一样:
cover,翻译过来就是“覆盖”,这是纯正的背景铺满了元素,它会比较图片的长和宽,哪一个比较小,它就以哪一个为基准进行扩大,图片的本身宽高比例是不变的,当增大到比较小的值铺满相应方向的屏幕了才截止;
contain:翻译过来是“包含”,这个是说整个背景都在页面内,一般图片过大了才会用,跟size相同的是,本身的宽高比是不变的,而不用的则是它取的是两者中比较大的一个,以其为基准进行缩小,小到比较大的一方进入屏幕才截止;
当然在ie下,还有这经典的滤镜,这个暂没试用,我就分享下别人写的代码吧。
filter: progid:DXImageTransform .Microsoft.AlphaImageLoader (src=http://www.mamicode.com/'.myBackground.jpg', >这样图片只要相差不是太离谱,想用哪个用哪个嘛
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。