我们目前在一个站点上使用 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 视为特定类型(图像与内容)?