0

我们目前在一个站点上使用 Zurb Foundation，并希望使用数据交换而不是背景图像。

虽然它处理带有图像扩展名（JPG、PNG）的图像，但每当我们尝试使用 CMS 动态创建的图像时，它就会阻塞。

例子：

<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en"> <![endif]-->
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>data-interchange test</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/normalize.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.css"/>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/vendor/modernizr.js"></script>
</head>
<body>
<div class="row"><div class="large-12 columns">
    <div data-interchange="[http://bus.wisc.edu/_images/template/global/thin/logo-horizontal.png, (default)]" style="width:100%;height:400px;">
        JPG extension
    </div>
</div></div>

<div class="row"><div class="large-12 columns">
    <div data-interchange="[https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=640&h=150, (default)]" style="width:100%;height:400px;">
        Dynamic image
    </div>
</div></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/vendor/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation/foundation.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation/foundation.interchange.min.js"></script>
    <script>
        $(document).foundation();
    </script>
</body>
</html>

根据他们关于 Interchange 的文档，听起来他们将其视为内容并尝试将其加载为：

当您添加包含图像路径（.jpg、.jpeg、.png、.gif、.bmp、.tiff）的数据交换属性时，它不会替换元素内容，而是使用相应的路径设置背景图像 css 属性.

它所没有的是一种告诉基金会将其视为图像的方法，这正是我所希望的。

有没有办法告诉 Foundation 将 URL 视为特定类型（图像与内容）？

4

0 回答 0