不用找UI, CSS也能搞定图片效果(等比缩放, 背景模糊处理,投影等等)
一. 实现图片的等比缩放
在实际开发过程中, 总是会遇到各种需要处理图片的情况,举个简单的例子, 用户上传头像,我们都知道头像宽高是有一定比例的, 但用户的图片千奇百怪,如果简单的按照我们设定的宽高显示,图片变形不可避免,那么该怎么处理?
方法1: object-fit
这个时候我们需要用到css的一个属性, object-fit.
<div class='header-container'><img src="./333.jpg" alt="">
</div>
<img src="./333.jpg" alt="" style='height: 100px;'>
.header-container{width: 100px;height: 100px;border: 1px solid #333;border-radius: 50%;overflow: hidden;
}
.header-container img{width: 100%;height: 100%;
}
不难看出, 上面的头像对比下面的原图,高度被拉伸了, 那么此时只需要给img添加一个属性object-fit: cover;
效果如下:
object-fit属性你了解多少呢?下面听我详细介绍下。
object-fit属性详解
根据MDN(object-fill)的介绍, object-fit
CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。
也就是说盒子固定宽高, 图片在这个盒子里面会如何适应。
它有四个属性值:
fill | contain | cover | none | scale-down
contain: 被替换的元素会被缩放,以此来适应框的宽高比, 如果里面元素的宽高比和框的宽高比不匹配,那么就会产生黑边。
可以看到上面图片中左右两边的就是所谓的黑边, 因为它的宽高比与框的不一致。
cover
: 被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配,该对象将被剪裁以适应内容框。
也就是说, 在宽高比不一致时,cover属性值会进行裁剪,以此来适应容器。
就像这样:
fill
:被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配,那么该对象将被拉伸以适应内容框。
fill属性与cover属性值类似,都会完全填充内容框, 不同的是fill属性值会拉伸元素来适应容器
如下图, 高度被拉伸
scale-down
: 内容的尺寸与none
或contain
中的一个相同,取决于它们两个之间谁得到的对象尺寸会更小一些。
大概就是取决于none和contain的最小值, 这个属性不怎么用到。
方法2: max-width和 max-height
我们可以设置max-width和max-height来限制图片的最大值,一般是设置为外层容器的100%; 这样图片就会等比缩放,且不会变形。
二.css处理图片效果
比如背景图片变模糊, 头像变亮,增加投影效果,反转颜色,对比度,饱和度等等
只需要使用到css3的一个属性, filter
原图:
1.图片变模糊
filter: blur(5px);
2.图片对比度调整
filter: contrast(200%);
3. 将图片转为灰度图像
filter: grayscale(1);
4.色相旋转,
filter: hue-rotate(45deg);
5.给图像设置一个阴影效果
filter: drop-shadow(16px 16px 20px yellow) invert(3%);
下面具体说说filter的各个属性值
/* URL to SVG filter */
filter: url("filters.svg#filter-id"); /* <filter-function> values */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);/* Multiple filters */
filter: contrast(175%) brightness(3%);/* Global values */
filter: inherit;
filter: initial;
filter: unset;
- url():URL函数接受一个XML文件,该文件设置了 一个SVG滤镜,且可以包含一个锚点来指定一个具体的滤镜元素.
- blur():给图像设置高斯模糊,值越大越模糊, 但不支持百分比
- brightness(): 给图像应用一种线性乘法,使其变暗/变亮,为0则全黑,为100%以上才会有变亮的效果
contrast()
:调整图像的对比度。值是0%的话,图像会全黑。值是100%,图像不变。值可以超过100%,意味着会运用更低的对比。若没有设置值,默认是1。- drop-shadow(): 给图像设置一个阴影效果。阴影是合成在图像下面,可以有模糊度的,可以以特定颜色画出的遮罩图的偏移版本.
- grayscale(): 将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0。
- hue-rotate(): 给图像应用色相旋转。“angle”一值设定图像会被调整的色环角度值。值为0deg,则图像无变化。若值未设置,默认值是0deg。该值虽然没有最大值,超过360deg的值相当于又绕一圈。
- invert(): 反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间,则是效果的线性乘子。 若值未设置,值默认是0。
想到再补充,溜了溜了。
不用找UI, CSS也能搞定图片效果(等比缩放, 背景模糊处理,投影等等)相关推荐
- (素材源代码)猫猫学IOS(四)UI之半小时搞定Tom猫
下载地址:http://download.csdn.net/detail/u013357243/8514915 以下是执行图片展示 制作思路以及代码解析 猫猫学IOS(四)UI之半小时搞定Tom猫这里 ...
- java粒子特效_程序员20分钟搞定粒子效果, 仅仅200行代码
原标题:程序员20分钟搞定粒子效果, 仅仅200行代码 这粒子的打造,确实没有布局代码,稍后大家在源码上可以看到,css代码都只有几行,绝大部分代码都是java代码,而且是原生java书写的,现在很多 ...
- 实用技巧丨在线轻松搞定图片无损压缩、批量裁剪、批量加水印!
哈喽大家好,我是搜集菌~ 日常工作中,我们经常会遇到网站限制上传图片大小.图片体积过大不能使用的情况,很多时候要对图片进行压缩.裁剪等来满足需求. 那么问题来了,怎样在尽可能保证画质的情况下将图片压缩 ...
- html图标 白块,桌面图标变成白块了?不用怕,1分钟就搞定!
电脑桌面图标突然变成白颜色了,这个问题相信大家在使用电脑的过程中,每个人都遇到过!遇到这种问题首先想到的就是用系统安全软件来修复,结果发现根本不起作用.电脑重启,还是不起作用!虽然问题不大,但修复起来 ...
- 图片转svg标注_两个免费网站轻松搞定图片文件压缩转化!
关注· 点击蓝字,关注我吧 图片压缩 文件转格式 两个免费网站轻松搞定 免费处理图片文字网站 前几天做公号的时候,上传图片遇到了图片过大无法上传的问题.这两个网站可以看做是兄弟俩,今天推荐给大家,省去 ...
- 网站后台没有提示声怎么办_收藏 | 没有 PS 怎么办?10个在线作图网站,轻松搞定图片设计...
求职技巧 | 职业技能 | 通关考试,关注公众号:职域go Photoshop 已经成为大多数工作需要用到的工具,很多时候我们都要用到它来满足一些简单的排版.图片处理.尺寸调整或者是做一些简单的效果. ...
- 3行代码Python搞定图片清晰度识别,原来我们看到不一定是这样的
在通常情况下,图片是否清晰是个感性认识,同一个图,有可能你觉得还过得去,而别人会觉得不清晰,缺乏一个统一的标准.然而有一些算法可以去量化图片的清晰度,做到有章可循. 原理 如果之前了解过信号处理,就会 ...
- docx文档怎么排列图片_格式转换太麻烦?仅需一行命令,搞定图片、音频、视频、文本批量转换!...
每天12:18准时给大家惊喜! 大家好!我是好奇仔,热衷于搜罗和分享各种好用.实用的软件神器和资源,有手机软件.办公软件.APP,还有网站资源-- 来自:芒种学院(ID:lazy_info) 作者: ...
- Fresco前传(1):一句话搞定图片显示(同时还可以满足各种小需求哦)
写在前边 N久没写博客了,最近公司项目的图片处理框架换成了Fresco,我被派去负责这块的公共方法的处理.最近闲下来了,用了这么久的Fresco,自己也琢磨了一些小技巧,虽然比不了很多大牛,登不上大雅 ...
最新文章
- python手机版打了代码运行不了-如何用iPad运行Python代码?
- 设置域名_如何设置二级域名解析?有什么设置方法?
- leetcode 135分发糖果
- Android listview优化以及listview混合itemview
- Bootstrap3 带条纹的表格样式
- C++ STL学习笔记(2) 容器结构与分类
- (十五)final关键字
- 切图具体需要切什么内容_【切图】UI设计师要懂得切图技巧
- EXCEL数据处理小结(SQL)
- iTextSharp 使用详解
- SpringCloud微服务之学生管理
- 2020年度十大高薪岗位出炉!程序员霸榜!
- 一个算法面试题的5种不同解法
- 深信服S5000-AC刷入 RouterOS 软路由 U盘PE下安装教程 (图文详解超详细)
- 【math】Hiden Markov Model 隐马尔可夫模型了解
- wps在word文档中插入xlsx格式文档会自动打开
- 雷电模拟器桥接模式不显示网卡,4版本不能设置代理
- intel dpdk api rte_eal_hpet_init() 函数介绍
- $(this).val()、this.id、$(this).attr(idCard)和复选框
- Monthly expense(二分)
热门文章
- 「六」创建一个带 weblogic 服务的基础镜像
- 内联检重秤的全球与中国市场2022-2028年:技术、参与者、趋势、市场规模及占有率研究报告
- PPT怎么转换PDF?来试试这几种方法
- 金融风控特征工程小结
- iVMS-4200 Vs区别_增额终身寿比拼:中华尊VS如意尊VS锦绣传承VS君康金生金世
- 耳机左右声道接反的问题
- android 删除无线驱动程序,android – 用于BCM4339的Nexus 5无线驱动程序
- 使用Microsoft.Practices.EnterpriseLibrary.Data调用存数过程Output参数注意事项
- ​当华为Mate 30遇上iPhone11 谁才会是最后的获胜者?
- 交换友情链接需要注意哪些事项