Question

我需要随机模式作为我网站的背景图片。我发现这个很棒的php库被称为geopattern。这里有一些beautiful examples。用法似乎非常简单，所以我设置了一个测试。这是我的test.php中的代码。

require_once('geopattern_loader.php');
$geopattern = new \RedeyeVentures\GeoPattern\GeoPattern();
$geopattern->setString('Mastering Markdown');
$geopattern->setBaseColor('#54ff9f');
$geopattern->setColor('#ffff00');
$geopattern->setGenerator('sine_waves');
$svg = $geopattern->toSVG();
$base64 = $geopattern->toBase64();
$dataURL = $geopattern->toDataURL();

我正在尝试使用下面的代码显示模式。但不知何故，我无法让图像显示在前端。

echo '<div style="background-size: 400px 400px; height: 400px; width: 400px; background-image: '.$dataURL.';"></div>';

以下是view-source中的内容，此处为link to result of echo $dataURL。您可能会注意到该字符串异常长。请告诉我我做错了什么。

更新：这是我的html和css的样子。

<!DOCTYPE html><html>
<head><meta content="text/html; charset=UTF-8" http-equiv="content-type"></head>
<body>
<?php echo '<div style="background-size: 400px 400px; height: 400px; width: 400px; background-image: '.$dataURL.';"></div>'; ?>
</body>
</html>

以下是它在firebug css控制台中的外观。

element.style {
    background-image: url("");
    background-size: 400px 400px;
    height: 400px;
    width: 400px;
}

Answer 1

问题是报价。您的Base64图像使用双引号，有效地关闭div上的“style”属性。

您必须在style属性上使用单引号并将其转义为：

<?php echo '<div style=\'background-size: 400px 400px; height: 400px; width: 400px; background-image: '.$dataURL.';\'></div>'; ?>

正确使用PHP库 - GeoPattern

1 个答案: