
一、前言
当看到小灰灰博客时,感到亲切与喜爱
喜欢其滚动时幻灯片式加载和清新的背景图
起初只是想要它半透明的顶栏
找到了博客园-护城河的文章
wordpress主题dux全站半透明效果
实现效果:网站显示除背景图片外,其余半透明效果,后台没有变化。
环境:wordpress4.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可发邮件。