博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
背景图片铺满屏幕-------Day85
阅读量:2232 次
发布时间:2019-05-09

本文共 610 字,大约阅读时间需要 2 分钟。

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

background-size:cover;

background-size:contain。

两个看起来几乎相同,实际原理还真不一样:

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

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

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

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

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

转载于:https://www.cnblogs.com/ljbguanli/p/6869615.html

你可能感兴趣的文章
【托业】【新东方托业全真模拟】TEST07~08-----P5~6
查看>>
solver及其配置
查看>>
JAVA多线程之volatile 与 synchronized 的比较
查看>>
Java集合框架知识梳理
查看>>
笔试题(一)—— java基础
查看>>
Redis学习笔记(三)—— 使用redis客户端连接windows和linux下的redis并解决无法连接redis的问题
查看>>
Intellij IDEA使用(一)—— 安装Intellij IDEA(ideaIU-2017.2.3)并完成Intellij IDEA的简单配置
查看>>
Intellij IDEA使用(二)—— 在Intellij IDEA中配置JDK(SDK)
查看>>
Intellij IDEA使用(三)——在Intellij IDEA中配置Tomcat服务器
查看>>
Intellij IDEA使用(四)—— 使用Intellij IDEA创建静态的web(HTML)项目
查看>>
Intellij IDEA使用(五)—— Intellij IDEA在使用中的一些其他常用功能或常用配置收集
查看>>
Intellij IDEA使用(六)—— 使用Intellij IDEA创建Java项目并配置jar包
查看>>
Eclipse使用(十)—— 使用Eclipse创建简单的Maven Java项目
查看>>
Eclipse使用(十一)—— 使用Eclipse创建简单的Maven JavaWeb项目
查看>>
Intellij IDEA使用(十三)—— 在Intellij IDEA中配置Maven
查看>>
面试题 —— 关于main方法的十个面试题
查看>>
集成测试(一)—— 使用PHP页面请求Spring项目的Java接口数据
查看>>
使用Maven构建的简单的单模块SSM项目
查看>>
Intellij IDEA使用(十四)—— 在IDEA中创建包(package)的问题
查看>>
FastDFS集群架构配置搭建(转载)
查看>>