在 HTML style=“” CSS 中使用 PHP 简码 - Using PHP shortcode in HTML style="" CSS

Using PHP shortcode in HTML style="" CSS

本文关键字：PHP 简码 CSS HTML style | 更新日期: 2023-09-26

我不确定这是否可能，但无论如何我都会问...

我正在尝试在高级自定义字段中使用 PHP 简码

<?php the_field('charitynumber'); ?>

让我们的客户在后端输入一个介于 1-100 之间的数字。这将影响根据慈善机构的总体目标数字显示/隐藏图像的div 的高度。我正在考虑像这样设置它

<div style="<?php the_field('charitynumber'); ?>"><img src="/img_here.jpg"></div>

但想不出该怎么做或替代方法。

您需要将简码放在有效的样式属性中。这意味着输出样式名称并附加适当的单位。此外，如果the_field()返回一个字符串，则需要回显它。

<div style="height: <?php echo the_field('charitynumber'); ?>%;"><img src="/img_here.jpg"></div>

试一试 - 你可以

<div class="progress">
   <div class="fillBar" style="height:calc(100% - <?php the_field('charitynumber'); ?>);"></div>
   <img src="/img_here.jpg">
</div>

然后从那里，你只需要设置酒吧的样式。我下面的示例将进度条锁定在底部，当您登陆页面时，进度条将从上到下进行动画处理，直到它停止在当前百分比处。

.progress{
   position: relative;
   width: 50px;
   height: 200px;
}
.progress img{
   width: 50px;
   height: 200px;
   position: absolute;
   z-index: 1;
}
.progress .fillBar{
  width: 50px;
  bottom: 0;
  height: 200px;
  transition: height 0.3s ease-out;
}