![](https://cdn.jishusongshu.com/images/2020/10/translucent.jpg)
一、前言
当看到小灰灰博客时,感到亲切与喜爱 ,喜欢其滚动时幻灯片式加载和清新的背景图
起初只是想要它半透明的顶栏,找到了博客园-护城河的文章
wordpress主题dux全站半透明效果
实现效果:网站显示除背景图片外,其余半透明效果,后台没有变化。
环境:WordPress 4.9.7、Centos7、lnmp1.5、主题dux
注意:其rgba(0,0,0,0.5)应改为rgba(255,255,255,0.5)
我跃跃欲试,觉定在本地网站试水
二、网站半透明化
然后开始折腾,右键元素-检查
找class,改样式,主要是背景色
background-color: rgba(255,255,255,0.5)
/*0.5表示透明度为50%*/
不断打磨样式,最终效果:
个人感觉还行,这里说下细节
1、顶栏半透明及彩条
.header{
background:rgba(255,255,255,0.78)url('https://www.jishusongshu.com/images/dytopbar.gif') repeat-x 0 100%;
}
2、网站鼠标指针
body{cursor:url(https://cdn.jishusongshu.com/images/2020/02/normal3.png), default;}
a:hover{cursor:url(https://cdn.jishusongshu.com/images/2020/02/link3.png), pointer;}
更多指针:精美网站鼠标指针,你见过多少?
3、滚动条样式
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background-color: rgba(73,177,245,.2);
border-radius: 2em;
}
::-webkit-scrollbar-thumb {
background-color: #49b1f5;
background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);
border-radius: 2em;
}
::-webkit-scrollbar-corner {
background-color: transparent;
}
::-moz-selection {
color: #fff;
background-color: #49b1f5;
}
三、其他美化
1、网站背景图
body{
background-image:url('https://www.jishusongshu.com/bing/api');
background-repeat:no-repeat;background-attachment:fixed;
}
2、网页加载动画
(1)加载动画插件
笔者找了很多,最后推荐WP Smart Preloader
选择自定义动画,填入自定义的html和css
(2)免费下载素材
推荐可免费下载素材的网站>>素材圈
(3)修改插件样式
为使加载动画呈半透明,做如下修改
wp-smart-preloader/assets/css/wsp-front-preloader.css
.smart-page-loader {
...
background: rgba(0,0,0,0.5);
...
}
为使夜间模式(插件wp-dark-mode)仍半透明,我们忽略夜间模式适配:
wp-smart-preloader/assets/js/wsp-main-script.js
<div class="smart-page-loader wp-dark-mode-ignore"></div>
四、后记
其他主题的修改类似于此,感兴趣可以试一试。
已换其他主题,如需要dux的main.css可发邮件。
![](http://img.szfx.top/banner/soft-banner.jpg?x-oss-process=style/wp)
![](https://cdn.jishusongshu.com/banner/banner-bottom.jpg?x-oss-process=style/wp)
Invitation
QQ Group
1095632335
created:04/01/2020
Welcome to the Group
Use this card to join us and participate in a pleasant discussion together .
Welcome to JISHUSONGSHU Group,wish you a nice day .