Question

我想知道是否有人有建议/想法使印刷预览跟随我的宽度颜色..

我目前的代码如下

<?php
$purata = 3.4;
$percentagePurata = number_format(($purata/5)*100,0);


echo'<div style="width:164px;margin:0 auto">';

$widthStar = (($purata/5)*164)-1;    
if ($percentagePurata <=69 && $percentagePurata > 0){  
  echo '<div class="star_red" style="width:'.$widthStar.'px;"><img src="images/star_rating.png"></div>';
} else if ($percentagePurata > 69 && $percentagePurata <= 74){  
  echo '<div class="star_yellow" style="width:'.$widthStar.'px;"><img src="images/star_rating.png"></div>';
} else if ($percentagePurata > 74 && $percentagePurata <= 100) {
  echo '<div class="star_green" style="width:'.$widthStar.'px;"><img src="images/star_rating.png"></div>';
}
if ($percentagePurata == 0){  
  echo '<div><img src="images/star_rating.png"></div>';
}

echo'</div>';
?>

我的css

.star_red{background:url(../images/red.png);}
.star_yellow{background:url(../images/yellow.png);}
.star_green{background:url(../images/green.png);}

因为我无法发布我的限制图像的链接，
红色，黄色和绿色是1px宽度和30px高度的图形图像而star_rating是透明的五星，所以我可以根据百分比在背景中显示特定的颜色。

在正常的网站视图中，宽度遵循如下：

http://imageshack.com/a/img674/5853/xkJArC.jpg

然后在打印预览时，它会显示如下所示的宽度：

http://imageshack.com/a/img537/2512/Uhjwzr.jpg

如果有人知道如何使打印预览顺利地遵循我的图形宽度，我很感激，如果你可以分享。谢谢。

Answer 1

啊，看起来我找到了答案......

首先，我只是意识到在打印预览中，我的star_rating.png缩小了，并且没有遵循正确的宽度。

因此，我在star_rating图片中添加了课程。在css中，我使用@media print来声明该类的最小宽度。您可以参考以下代码：

<?php
$purata = 3.4;
$percentagePurata = number_format(($purata/5)*100,0);

echo'<div style="width:164px;margin:0 auto">';
$widthStar = (($purata/5)*164)-1;    
if ($percentagePurata <=69 && $percentagePurata > 0){  
echo '<div class="star_red" style="width:'.$widthStar.'px;"><img class="star_transparent" src="images/star_rating.png"></div>';
} else if ($percentagePurata > 69 && $percentagePurata <= 74){  
echo '<div class="star_yellow" style="width:'.$widthStar.'px;"><img class="star_transparent" src="images/star_rating.png"></div>';
} else if ($percentagePurata > 74 && $percentagePurata <= 100) {
echo '<div class="star_green" style="width:'.$widthStar.'px;"><img class="star_transparent" src="images/star_rating.png"></div>';
}
if ($percentagePurata == 0){  
echo '<div><img src="images/star_rating.png"></div>';
}

echo'</div>';
?>

和我的css如下 @media print {.star_transparent {min-width：164px;}}

我可以关闭这个问题，我想......谢谢。

打印预览不遵循宽度图像/颜色

1 个答案: