• 主题更新一下,修复了头像挂掉的问题

  • 后羿更新网站文章可能不会那么闲了

  • 不得不说,美国贴吧的界面真是难看到死

  • 看到网上新闻美国的贴吧将成为中国公司

  • 推送试试

  • 睡觉之前测试一下

  • 发现了一个非常不错的插件

  • 经过确认,微软的必应搜索在中国被屏蔽

  • 给主题增加一个阿里云的代码库

  • 正式通知一下,有赞支付已经停止业务了

小技巧解决大问题-轻松解决随机彩色问题

网络技术 云落 2年前 (2017-09-02) 423次浏览 6个评论
文章目录[隐藏]

利用随机数以及动态 class 的方法,我们这边可以做出很多漂亮的色彩搭配,今天就来看下。

小技巧解决大问题-轻松解决随机彩色问题

前言

第一个方案

第一个方案简单粗暴,主要是使用了随机数函数,我们都知道颜色代码都是这样的#ffffff 或者这样的#000000,这两个分别是白色以及黑色,那么我们是否认为随机的 6 个数字都是一个颜色?那么应该明白我说的吧。

<?php
 $color = dechex(rand(0,16777215));
  $content = '<div style="background-color: #'.$color.';" id="" class="">XXOO</div>';
  echo $content;
?>

这个代码好处就是简单,而且颜色很多
坏处就是颜色不能控制,可能出现和背景或者文字颜色冲突的情况,另外纯数字颜色质量不太好。

第二方案

这里云落使用的是第二种方案,也是目前我的导航页面正在用的方案,当然也是使用了随机函数的,这里采用的是叫做动态 class 的技术,看下代码很简单。

<?php
 $color = mt_rand(1, 3);
  $content = '<div id="" class="color_'. $content .'">XXOO</div>';
  echo $content;
?>
<style type="text/css">
	.color_1{xx:oo;}.color_2{xx:oo;}.color_3{xx:oo;}
</style>

这里的好处就是色彩可以以及选择控制,不至于出现乱配色的情况。
坏处嘛,就是代码稍微多了点。

后语

代码虽然是瞎写的,比较污,但是思路知道就行,这里云落自己记录下,用到的地方其实很多的,就酱紫。听个歌《你的名字》


-- 完 --
小技巧解决大问题-轻松解决随机彩色问题
扫码订阅,第一时间获得更新
微信扫码二维码,订阅我们网站的动态,另外不定时发送 WordPress 小技巧,你可以随时退订,欢迎订阅哦~

极客公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:小技巧解决大问题-轻松解决随机彩色问题

极客公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:小技巧解决大问题-轻松解决随机彩色问题
喜欢 (2)
云落
关于作者:
无折腾,不生活,我是一个WordPress菜鸟,一个玩淘宝的卖家,欢迎你认识我,我是云落!
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(6)个小伙伴在吐槽
  1. 整不明白,太深奥咧
    阿童木2019-01-25 02:55 回复 Windows 10 | Chrome 71.0.3578.98
  2. 好像我就是用方法一,感觉方法二更好,颜色可控,挺给力的
    懿古今2018-03-09 22:10 回复 Windows 7 | Chrome 64.0.3282.186
    • 代码要放在那里?
      阿童木2019-01-24 23:11 回复 Windows 10 | Chrome 71.0.3578.98
      • 云落
        放在需要显示的地方。。。另外这个只是范例
        云落2019-01-24 23:11 回复 Windows 10 | Chrome 71.0.3578.98
        • 做一个跟你那个类似的导航,直接把代码放页面里?能不能把你那一页代码贴一下
          阿童木2019-01-24 23:20 回复 Windows 10 | Chrome 71.0.3578.98
          • 云落
            自行去看我的主题代码
            云落2019-01-24 23:21 回复 Windows 10 | Chrome 71.0.3578.98