【灵活运用CSS】

icyfire 发布于2019-08-30 11:03 / 608人阅读

假设我们的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

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栅格来满足实际的业务需要，本文聊聊css栅格系统在项目中的灵活运用。需求 UI设计了如下布局，其中左上角橙色部分是固定的，蓝色部分是动态渲染的，从前往后依次展示，有一个就显示一块，有二个就显示二块...

summerpxy 2019-08-29 16:05 评论0 收藏0
css栅格系统在项目中的灵活运用

摘要：前言栅格通常捆绑在各种框架中，但有时你需要自己去定制一个栅格来满足实际的业务需要，本文聊聊栅格系统在项目中的灵活运用。前言 css栅格通常捆绑在各种框架中，但有时你需要自己去定制一个css栅格来满足实际的业务需要，本文聊聊css栅格系统在项目中的灵活运用。需求 UI设计了如下布局，其中左上角橙色部分是固定的，蓝色部分是动态渲染的，从前往后依次展示，有一个就显示一块，有二个就显示二块...

soasme 2019-08-05 14:27 评论0 收藏0
【灵活运用CSS】

假设我们的pm有这样一个需求, 一张简单的透明png图片，如图：showImg(https://segmentfault.com/img/bVbsrhc); 现在要求图片的颜色能根据手机壳的颜色来变色...开个玩笑，一般这个时候已经打起来了要求是用户可以根据用户点击的按钮颜色来设置图片的颜色，也就是说我们的这张黑色主色的图片远远无法满足要求,那么该怎么办呢？找UI吧，多出几张不就行了，ok 做...

lewinlee 2019-08-02 15:13 评论0 收藏0
【灵活运用CSS】

假设我们的pm有这样一个需求, 一张简单的透明png图片，如图：showImg(https://segmentfault.com/img/bVbsrhc); 现在要求图片的颜色能根据手机壳的颜色来变色...开个玩笑，一般这个时候已经打起来了要求是用户可以根据用户点击的按钮颜色来设置图片的颜色，也就是说我们的这张黑色主色的图片远远无法满足要求,那么该怎么办呢？找UI吧，多出几张不就行了，ok 做...

mudiyouyou 2019-08-23 17:56 评论0 收藏0
谈谈常见H5制作方法——视频与CSS3

摘要：但目前白名单申请途径已经关闭。目前在安卓有一种同层播放器的解决方案。可解决安卓机自动全屏以及视频播放完毕会跳出广告的问题，并且可以实现交互。本文在H5动效的常见制作手法的基础上，对相印的H5动效制作手法进行了扩展和整理，并结合案例谈谈怎么将其做得生动。视频类 1、体验案例视频类h5可以带给用户动效逼真，流畅的体验。虽然说制作视频的难度较大，但是瑕不掩瑜，一支视频可以尽可能地创造出...

Flink_China 2019-08-05 10:22 评论0 收藏0