在图像上方创建一个标记图标。
要应用此组件,请将uk-marker
属性添加到任何元素。 可以使用Position
组件将标记放置在图像的顶部。 还可以添加Utility
组件中的.uk-transform-center
,将标记居中到其左上角。
<a href="" uk-marker></a>
Note 添加.uk-light
或者 .uk-dark
class,可以对元素效果进行优化,使其在深色或浅色图像上具有更好的可见性。
<div class="uk-child-width-1-2" uk-grid>
<div>
<div class="uk-inline uk-dark">
<img src="/skin/ukv3/images/light.jpg" alt="">
<a class="uk-position-absolute uk-transform-center" style="left: 20%; top: 30%" href="#" uk-marker></a>
<a class="uk-position-absolute uk-transform-center" style="left: 60%; top: 40%" href="#" uk-marker></a>
<a class="uk-position-absolute uk-transform-center" style="left: 80%; top: 70%" href="#" uk-marker></a>
</div>
</div>
<div>
<div class="uk-inline uk-light">
<img src="/skin/ukv3/images/dark.jpg" alt="">
<a class="uk-position-absolute uk-transform-center" style="left: 20%; top: 30%" href="#" uk-marker></a>
<a class="uk-position-absolute uk-transform-center" style="left: 60%; top: 40%" href="#" uk-marker></a>
<a class="uk-position-absolute uk-transform-center" style="left: 80%; top: 70%" href="#" uk-marker></a>
</div>
</div>
</div>