用CSS实现给图片上色的效果

2016-02-17 04:47 84 1 收藏

只要你有一台电脑或者手机，都能关注图老师为大家精心推荐的用CSS实现给图片上色的效果，手机电脑控们准备好了吗？一起看过来吧！

【 tulaoshi.com - 平面设计】

步骤是这样的：

1.先把你想要做的图片放到PS里面进行去色处理-图像–调整–去色或者ctrl+shift+u

2.将此图和原图片整合成上下两张的图片，如下图：

用CSS实现给图片上色的效果,PS教程,图老师教程网

3.下一步写下代码：

xhtml代码：

div id="box" a href="#" span/span /a /div

CSS代码：

a {float:left;}#box span {border:3px solid #ccc;display:block;width:170px;height:120px;background:url(flower.jpg) center top no-repeat;}#box a:hover span {background:url(flower.jpg) center -120px no-repeat;}

来源:https://www.tulaoshi.com/n/20160217/1578634.html

看过《用CSS实现给图片上色的效果》的人还看了以下文章更多>>

用CSS做滑动效果的图片画廊

标签： Web开发

代码如下：以下是引用片段： style #galleryh { padding:0; margin:0 auto 5em auto; list-style-type:none; overflow:hidden; width:495px; height:240px; border:1px solid #888; background:#fff url(/imagelist/06/24/o9642o826u4n.gif); } #galleryh li { ...

用Word 2007实现图片倒影效果

标签： word

用Word 2007实现图片倒影效果在Word 2007中能否实现具有倒影效果的图片?下面介绍如何在Word 2007中实现图片的倒影效果。启动Word 2007软件并新建一个Word 2007空白文档，然后单击Word 2007中插入选项卡，在Word 2007中插图组中单击图片按钮，打开Word 2007插入图片对话框。找到并选中事先准备好的图片，单击Word 2007中插...

用canvas实现图片滤镜效果附演示

标签： Web开发

这是一个很有意思的特效，模拟摄像机拍摄电视屏幕画面时出现点状颗粒的效果。颗粒的大小通过变换矩阵实现，可以任意调节，有兴趣研究的朋友可以尝试更多的效果，代码没有经过优化，只是一个粗糙的Demo，大家可以自行改进。 1.获取图像数据代码如下： img.src = ’http://bloglaotou.duapp.com/wp-content/themes/frontopen2/tools...

CSS教程:纯CSS实现的圆角化图片

标签： Web开发

在前面一篇文章中，我们将一张上下渐变的的图片作为标题的背景，并将它应用了圆角效果。是不是这种圆角框只能用于比较单调的图片呢？我们还能将一些颜色比较丰富的图片也进行透明圆角化吗？答案是肯定的，下面看看它的终极功夫。还是先看最终效果图吧：图一看到了吧，这就是用纯CSS实现的圆角化图片，为了能看到透明化的效果，...

导航上用CSS标志当前页效果的实现

标签： Web开发

当前页面--比如说现在的页面是首页，那么在导航栏上首页的色彩等和其他栏目有所不同，用以给浏览者一个明显的指示。下面来说下具体的做法，菜单的基本实现和一般的CSS菜单没多大区别，着重说下如何实现当前页。设菜单有5个栏目：home、about、products、services、contact，分别给每个栏目一个ID，m1-m5，CSS可写成如下：以下是...

查看更多精彩>>