我有一个项目网格,它们的所有数据都存储在数据库中,但我希望它们的每个悬停覆盖都是与数据库中该项目相关联的颜色。
在上传过程中使用颜色选择器(jscolor),十六进制代码存储在数据库中。然后我可以获得十六进制代码,但无法找到在php中动态设置覆盖背景颜色样式的方法。
这就是我试图实现的目标:
彩色叠加
CSS
.overlay-custom {
position: absolute;
width: 250px;
height: 250px;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-ms-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: opacity;
-moz-transition-property: opacity;
-ms-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
background-color:#00ff00;
z-index:2;
我想用数据库中的十六进制代码动态地替换这个div类的背景颜色。
在最初输出.overlay custom.时使用php创建内联样式
<?php
// load overlay color from database somehow
$overlay_color = get_overlay_color();
?>
<div class="overlay-custom" style="background-color:#<?php echo $overlay_color ?>"></div>
或
<?php
echo '<div class="overlay-custom" style="background-color:#' . $overlay_color . '"></div>';
?>
然后不透明度和所有这些仍然可以在css文件中进行调整。