假设我们的pm有这样一个需求, 一张简单的透明png图片,如图:
现在要求图片的颜色能根据手机壳的颜色来变色...开个玩笑,一般这个时候已经打起来了
要求是用户可以根据用户点击的按钮颜色来设置图片的颜色,也就是说我们的这张黑色主色的图片远远无法满足要求,那么该怎么办呢? 找UI吧,多出几张不就行了,ok 做完之后,需求又改了一下,就是不仅有几个可以特定的可供选择颜色的按钮,还可以直接在颜色选取器里选取颜色... 做不了,做不了 其实乍一听好像很{{BANNED}},不过呢,别急,我们甚至可以不需要借助太多的javascript,用css就能搞定 这时我们的filter(滤镜)属性出场 1、filter,从字面意思来看就是滤镜,官方定义filter属性定义了元素(通常是)的可视效果(例如:模糊与饱和度) 2、用法 filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
可以看到,属性有很多可选值,他们都是什么意思呢?
1 grayscale灰度 2 sepia褐色(有种复古的旧照片感觉) 3 saturate饱和度 4 hue-rotate色相旋转 5 invert反色 6 opacity透明度 7 brightness亮度 8 contrast对比度 9 blur模糊
10 drop-shadow阴影
这里我们用到的是drop-shadow
drop-shadow也可以理解为投影,它很符合真实世界的投影,比如非透明的颜色,就有投影;透明部分,光线穿过,没投影
其中接收四个参数 如filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值)
第三个参数如果不写直接填写为色值 如
img{ width: 100px; height: 100px; position: relative; left: -100px; filter:drop-shadow(100px 0px red) }
这就代表这张图片在原图的右侧100px处生成一"投影"
写到这里还差一点我们就可以完成需求了
这里可以看到 其实是生成了两张图片,一张原图一张投影。到此,应该都能想到,将原图隐藏就可以了,所以我们只需在img外层包裹一层块级元素,将块级元素的宽高设定成我们所需要的,加上overflow属性,再将原图定位到父元素的外面,投影留在里面就ok,直接上成品代码
css
#a{ width: 100px; height: 100px; border: 1px solid #ffffdffffd; margin: 100px auto; overflow: hidden; } img{ width: 100px; height: 100px; position: relative; left: -100px; filter:drop-shadow(100px 0px red) } #color{ width: 600px; line-height: 60px; margin: 100px auto; text-align: center; } #color button,#random { width: 100px; outline: none; border: none; height:30px; margin-right: 20px; color: #fff; font-size: 15px; cursor: pointer; } .t { margin: 0 auto; width: 400px; text-align: center; } #random { background: #000000 }
html
sssssss
javascript
var getRandomColor = function(){
return "#"+Math.floor(Math.random()*16777215).toString(16);
}
var setColor = function (dom) {
dom.style.background = dom.innerHTML return dom
}
let btn_list = document.querySelectorAll("#color button")
btn_list.forEach(el => {
setColor(el).onclick = function () { img.style.filter = "drop-shadow(100px 0px "+ this.innerHTML +")" }
})
random.onclick = function () {
img.style.filter = "drop-shadow(100px 0px "+ getRandomColor() +")"
}
最终效果
具体详细的写法还需要根据不同的需求来定,其它用法大家也可以研究一下,如sepia可以让多色彩的图片看起来有复古效果, blur 让图片模糊。。。 具体用法就不一一介绍了 不过filter在ie浏览器上是不支持的。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/114740.html
摘要:前言栅格通常捆绑在各种框架中,但有时你需要自己去定制一个栅格来满足实际的业务需要,本文聊聊栅格系统在项目中的灵活运用。 前言 css栅格通常捆绑在各种框架中,但有时你需要自己去定制一个css栅格来满足实际的业务需要,本文聊聊css栅格系统在项目中的灵活运用。 需求 UI设计了如下布局,其中左上角橙色部分是固定的,蓝色部分是动态渲染的,从前往后依次展示,有一个就显示一块,有二个就显示二块...
假设我们的pm有这样一个需求, 一张简单的透明png图片,如图:showImg(https://segmentfault.com/img/bVbsrhc); 现在要求图片的颜色能根据手机壳的颜色来变色...开个玩笑,一般这个时候已经打起来了 要求是用户可以根据用户点击的按钮颜色来设置图片的颜色,也就是说我们的这张黑色主色的图片远远无法满足要求,那么该怎么办呢? 找UI吧,多出几张不就行了,ok 做...
阅读 1032·2021-09-22 15:19
阅读 1655·2021-08-23 09:46
阅读 2190·2021-08-09 13:47
阅读 1373·2019-08-30 15:55
阅读 1365·2019-08-30 15:55
阅读 1949·2019-08-30 15:54
阅读 2767·2019-08-30 15:53
阅读 680·2019-08-30 11:03