说明
由于博主已经习惯半透明风格，所以觉得对当前这块Handsome模板下手了
有的同学可能也喜欢这样的样式 所以我就把代码整理出来~ 同时也留给自己做备份
是一个细节一个细节调的哦~
转载记得 注明来源
转载记得 注明来源
转载记得 注明来源
同时本站对该模板的样式一有新的修改 我也会更新这篇记录.并码上备注
谢谢！！
更新
2019年7月20日 09:32:53
github单页 颜色覆盖
2019年7月21日 12:40:38
注意 我用的配色是第四种
png蒙版更新
2019年7月22日 12:08:43
头像转动 放大删除 边线调细
所有的评论区头像hover旋转
2019年7月23日 18:15:16
评论区的css bug
请多多指教啦~！
先看看博主以前的博客前端样式(可能访问不辽)
http://iitboy.gz01.bdysite.com/wp
http://iitboy.gz01.bdysite.com/emlog
是不是很好看呢哈哈哈，反正我自己认为好看就是了。
废话不多说 开上代码
代码
PNG蒙版遮罩
就是 有一种瓦楞的感觉... 把代码插入的body下即可
记得图片自己保存一下 防止连接失效
png蒙版
<div class="bg-image-pattern" style="
background: rgba(255, 255, 255, 0.05) url(https://dxoca.cn/usr/uploads/2019/07/152024068.png) repeat scroll 0 0;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: -998;
"></div>
半透明
其中评论框的css是内嵌的所有只能手动修改文件 使其透明
此处内容需要评论回复后（审核通过）方可阅读。
继续接上面 这一串是 解决评论部分无透明底色
弄完之后内部评论框的css 半透明要手动去php文件(handsome/component/comment.php) 推荐0 .9 -> 0.5 修改~
如果解决不了的话 可以联系我帮你哦！~
评论修复
.wrapper-md>#comments, .wrapper-md>.blog-post, .wrapper-md>.breadcrumb, .m-t-lg.m-b-lg, .wrapper-md>.no_search_result {
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.wrapper-md .panel, .wrapper-md .panel-small, .wrapper-md>#comments, .wrapper-md>.breadcrumb {
background-color: rgba(255,255,255,.9);
}
.wrapper-md article, .wrapper-md>#comments {
border-radius: 5px;
overflow: hidden;
}
.wrapper-md>#comments {
border: solid 1px #fff;
padding: 10px 30px 20px 30px;
}
其他
一些细节的处理
美化
/**评论打卡**/
.OwO.OwO-open .OwO-body {
display:table
}
/*首页文章图片获取焦点放大*/
.item-thumb{
cursor: pointer;
transition: all 0.6s;
}
.item-thumb:hover{
transform: scale(1.03);
}
.item-thumb-small{
cursor: pointer;
transition: all 0.6s;
}
.item-thumb-small:hover{
transform: scale(1.03);
}
/*首页头像自动旋转*/
.avatar{
-webkit-transition: 0.4s;
-webkit-transition: -webkit-transform 0.4s ease-out;
transition: transform 0.4s ease-out;
-moz-transition: -moz-transform 0.4s ease-out;
}
.thumb-sm , .thumb-lg{
-webkit-transition: 0.4s;
-webkit-transition: -webkit-transform 0.4s ease-out;
transition: transform 0.4s ease-out;
-moz-transition: -moz-transform 0.4s ease-out;
}
.thumb-sm:hover , .thumb-lg:hover{
transform: rotateZ(360deg);
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
}
#aside-user span.avatar{
animation-timing-function:cubic-bezier(0,0,.07,1)!important;
border:0 solid
}
#aside-user span.avatar:hover{
/*transform:rotate(360deg) scale(1.2);*/
border-width:3px;
animation:avatar .5s
}
/*文章阴影*/
/*panel阴影*/
.panel{
box-shadow: 1px 1px 5px 5px rgba(203, 203, 203, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(203, 203, 203, 0.35);
}
.panel:hover{
box-shadow: 1px 1px 5px 5px rgba(247, 204, 222, 0.20);
-moz-box-shadow: 1px 1px 5px 5px rgba(247, 204, 222, 0.20);
}
.panel-small{
box-shadow: 1px 1px 5px 5px rgba(203, 203, 203, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(2203, 203, 203, 0.35);
}
.panel-small:hover{
box-shadow: 1px 1px 5px 5px rgba(247, 204, 222, 0.20);
-moz-box-shadow: 1px 1px 5px 5px rgba(247, 204, 222, 0.20);
}
.app.container {
box-shadow: 0 0 30px rgba(255, 112, 173, 0.35);
}
/*标签背景色*/
.badge {
background-color: #8db3bd;
}
/*气泡颜色*/
.tooltip-inner {
background-color: #fd6ccdeb;
}/*选中文字*/
::selection {
background: #7d36a8b0;
color: #fff;
text-shadow: none;
}
本文作者：Author： 寒光博客
文章标题：寒光博客Handsome美化 半透明化及一些效果
本文地址：https://dxoca.cn/front/57.html 百度已收录
版权说明：若无注明，本文皆为“Dxoca's blog （寒光博客）”原创，转载请保留文章出处。
本文地址：https://dxoca.cn/front/57.html 百度已收录
版权说明：若无注明，本文皆为“Dxoca's blog （寒光博客）”原创，转载请保留文章出处。
插眼
1111111
插眼
nb
插眼
插眼
再次重来
文章不错，必须赞赏
寒光我又来看美化了 转来转去还是喜欢你改的诶哈哈哈哈
嘿嘿嘿 多来踩踩~
冒个泡
半透明很好看唉
再来拿一次。。。
你好厉害呀
emmmmmmmmmmmmmmmmmmyyyy(/ω＼)
主题还漂亮，来看看！OωO
emmmm
谢谢
文章不错支持一下吧
Notice: Undefined offset: 1 in /www/wwwroot/blog/usr/plugins/UserAgent/Plugin.php on line 255
ViVO Windows Server 2003 中国 四川 广元
手机半透明怎么弄呢？
Notice: Undefined offset: 1 in /www/wwwroot/blog/usr/plugins/UserAgent/Plugin.php on line 255
ViVO Windows Server 2003 中国 四川 广元
支持一下
安装模板以后首页数据库错误提示，SQL语句执行错误: SELECT id,content,img,author,date,replynum FROM emlog_twitter ORDER BY
dateDESC LIMIT 1Table 'vip_8kya_com.emlog_twitter' doesn't exist
学习看看啦
感谢，在学习
感谢感谢
努力学习
感谢分享~
嘿嘿 谢谢支持
咳咳，再拿一遍代码
铐走！！ヾ(≧∇≦*)ゝ
我要代码 emmmm
谢谢~
客气
膜拜大佬awa
客气 客气
小白表示...不会弄
qwq 那就补一下基础
膜拜大佬~OωO
想学习一下！！！
想要大佬的全部插件qwq
慢慢搞qwq
评论一个
1494131712qq在这
博主能不能私聊我不会安装你的模板
我不是模版的作者，，我只是美化了一下(/ω＼)
膜拜大佬~OωO
爱折腾，膜拜大虾
好看！
嘿嘿 谢谢夸奖
看看ヾ(≧∇≦*)ゝ
学习下
滴！访客卡！请上车的乘客系好安全带，现在是：Sun Oct 20 2019 20：27：23 GMT+0800 (中国标准时间)
滴！访客卡！请上车的乘客系好安全带，现在是：Sun Oct 13 2019 11:02:34 GMT+0800 (中国标准时间)
你好哦~
非常漂亮~
好看
嘿嘿 谢谢夸奖~！
滴！访客卡！请上车的乘客系好安全带，现在是：Wed Aug 21 2019 18:40:20 GMT+0800 (CST)
学习
学习
不知道手机端能不能半透明呢，现在的设置好像手机端依旧是白底，但背景图是在的⌇●﹏●⌇
对对，，我还没 抽时间 看看，， 我弄好了 告诉你
这个怎么修改大佬 ， 小白一个，搞不懂。
css 加到头部就好了
还是搞不懂，哈哈
要我帮你么， qq联系|´・ω・)ノ
可以嘛大佬 qq786232811
然后突然发现Lighthouse评分降低。。。
因为 css，，直接嵌入 并且冗余了
要开始魔改了嘛|´・ω・)ノ
不鸭， 只是稍加美化啦~
瞻仰大佬~~学习了
|´・ω・)ノ商业互学
我来留个脚印，顺便看看半透明~|´・ω・)ノ
哈哈 好嘞~
不错哦，学习学习(☆ω☆)
谢谢支教鸭~|´・ω・)ノ
来学习OωO
欢迎来小站哦~ヾ(≧∇≦*)ゝ
学习了！！
刚刚 把 评论底色缺失 修复了一下
但是还没完全弄完呢，，还有点问题~，
客气辽
大佬 学习了 ！！
我，，是萌新 ٩(ˊᗜˋ*)و