php - 如何使用数据库中的颜色在 PHP 中动态更改 css 背景颜色

Question

我有一个元素网格，它们的所有数据都存储在数据库中，但我希望它们的每个悬停叠加层都是与数据库中该元素关联的颜色。

在上传过程中使用颜色选择器(jscolor)，十六进制代码存储在数据库中。然后我可以获得十六进制代码，但无法找到一种在 php 中动态设置叠加层背景颜色样式的方法。

这就是我想要实现的目标:

Color Overlay

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 类的背景颜色。

Answer 1

当您最初输出 .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 文件中进行调整。