Question

所以我从一个数组中获取了一些类似于我制作的条状图表的信息。这是CSS：

<style>
.outer,
.inner,
.target {
  height: 14px;
  margin-bottom: 5px;
}
.outer {
  background-color: #cccccc;
  width: 80%;
  margin: 20px auto;
  position: relative;
  font-size: 10px;
  line-height: 14px;
  font-family: sans-serif;
}
.inner {
  background-color: green;
  position: absolute;
  z-index: 1;
  text-align: right;
  border-right: 2px solid black;
}
.inner:after {
  content: '$avg_width';
  display: inline-block;
  left: 10px;
  position: relative;
  height: 100%;
  top: -14px;
}
.target {
  background-color: transparent;
  width: 19px;
  position: absolute;
  z-index: 2;
  color: black;
  text-align: right;
  border-right: 2px dotted black;
}
.target:after {
  content: 'Target: $target_width';
  display: inline-block;
  left: 28px;
  position: relative;
  height: 100%;
  top: 14px;
}
.solid_line {
  color: black;
  float: right;
  width: 3px;
  border-right: 3px solid black;
  height: 16px;

}
</style>

这是php：

<?php

    $target = number_format((float)$data->data[2][32][3], 2, '.', '');
    $array = [];
    $sum = 0;
    $path = $data->data[2];
    $bar_width = '200px'; 
    foreach($path as $key => $item){
        if($key > 1 && isset($item[5])){ 
            $array[] = (int)$item[5];
            $sum += (int)$item[5];
        }
    }
    $avg = ($sum / count($array));
    $base   = max($target, $avg);
    $target_width = $bar_width / 100 * ($target / $base * 100);
    $avg_width = $bar_width / 100 * ($avg / $base * 100);
    $percent = $avg / $target;                       
?>

这是HTML：

<div class="outer"> 
    <div class="target">
    </div>                   
    <div class="inner">
    </div>
</div>

正如您所看到的，我尝试在css中使用content属性并在其中使用php，但由于某种原因它不显示结果。

Answer 1

那是因为您直接在CSS中访问PHP变量。 HTML / CSS在客户端执行，而PHP在客户端执行。

因此，您需要在页面CSS中回显PHP变量。像这样：

.inner:after {
  content: '<?php echo $avg_width ?>';

以上echo代码将在服务器端执行，并为客户端CSS提供值以正确呈现元素。

确保您在 ON PAGE / INLINE CSS 上使用它，这不会起作用在外部.CSS文件。

如何在css中创建内容属性使用php

1 个答案: