前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

人民日报“点亮”样式,排版教程在此!

嗨铁子们大家好

我是泥萌挖掘师9妹

想知道有多少小伙伴

天天蹲点等9妹的推文



毕竟每次都能知道你所想所需

9妹这样贴心的女孩不多了

不接受反驳的声音



经过这段时间的密切观察

发现你们都在问一个样式

“ 这种点亮效果怎么做到的 ”

“ 怎么才能实现图片点亮 ”

那就是下图这类




这么美这么高大上的效果

如何制作出来的

很多小伙伴都非常的费解

别怕

9妹专治各种疑难杂症

真的非常非常简单



操作步骤来了

小板凳坐好小本子准备记笔记


第一步

找一张你想点亮的任何图片

在编辑器内上传图片

选中图片后在工具条中选择美图



点开美图后会看到很多滤镜

选择黑白画映后点击确定



这张图片在编辑器内

就是呈现灰色的效果了

双击灰色图片

复制地址栏的地址



第二步


编辑器内搜索样式编号

「 23843 」

添加到编辑器内

我们需要利用这个素材实现点亮样式

点击HTML



选中的代码就是原图片地址

把刚才复制的灰色图片地址

粘贴在选中的位置

点击HTML返回编辑器内



因为彩色的原图

已经上传过编辑器内了

可直接在我的图片

再次点击添加编辑器内



再次双击图片复制地址

然后回到HTML里面

把地址粘贴在阴影处替换掉

再次点击HTML

返回编辑器内就完成啦



点击下方查看效果图

因为是长方形的图片

与下方的文字会有一大段的留白

也是需要在HTML里面修改


若插入的图片显示不全后面留白太多

请修改「 858 」的值



留白在代码里调整后的效果图

完整的点亮图片

就这样完成啦

点击下方查看效果图



动手动手动手操作

多操作几遍就会啦




以上就是针对点亮样式

教程的介绍啦

如果还有其他的疑问

可直接留言告诉9妹


发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言