子比美化-手机端左侧菜单美化添加背景图片

前言

手机端左侧的菜单栏看起来太单调了,就想着给美化一下添加一张背景图片。

话不多说,直接上教程。

思路

直接添加背景图片,太亮效果不太好。给图片加一层遮罩。rgba(0,0,0,0.4) (顶部浅黑)→ rgba(0,0,0,0.6) (底部深黑)的渐变,把背景压暗,防止影响到文字阅读,看你自己菜单的文字颜色是白是黑?如果是黑色就改成白色遮罩,rgba(255,255,255,0.3) (白色半透明),代码中的图片链接可以自己更换。

如果后续仍觉得文字不清晰,可进一步调整 linear-gradient 中的透明度数值(如把 0.6 改为 0.7 ,遮罩会更暗),根据实际图片亮度灵活适配即可。

部署教程

📝 使用方法

  • 登录WordPress后台进入 外观
  • 全局设置-自定义代码-css自定义代码
  • 粘贴代码
  • 将代码粘贴进去
  • 刷新缓存即可

暗系css代码

亮系css代码

图片链接

https://s2.d931.com/mmy888/i/tyzyj/42tdg.png

截图展示

图片[1]-子比美化-手机端左侧菜单美化添加背景图片-ZB博客
图片[2]-子比美化-手机端左侧菜单美化添加背景图片-ZB博客

结束语

我还是喜欢暗系的,亮系容易闪眼,喜欢那个就自己部署,可以都试试看看效果!

© 版权声明
THE END
喜欢就支持一下吧
点赞14 分享
评论 共11条

请登录后发表评论

    暂无评论内容