Question

我想在图片上设置永久视频图标，但我不能。当我这样做时，显示两个图像：1。视频图标2.我的图像，但不是一次调整1和2一个图像。

更清楚：我想与视频图标分享照片。我有没有视频标志的图像。我想使用代码在图像上添加视频徽标。我不想用photoshop设置徽标。

HTML：

<div class="video">  
    <img style="height:200px" src="http://i.imgur.com/GMjqTR7.jpg"/>
    <a href="#"></a>
</div>

CSS：

.video {
    position: relative;
}
.video a {
    position: absolute;
    display: block;
    background: url(/images/play-btn.png);
    height: 100%;
    width: 100%;
    top: 75px;
    left: 150px;
    background-size: 50px 50px;
    background-repeat: no-repeat;
}

请帮助我。谢谢。
JSFiddle - Live

Answer 1

这可以在客户端或服务器端完成。基于您的示例仅包含前端代码的事实，我假设您希望在前端执行此操作。

看看watermak js http://brianium.github.io/watermarkjs/

对于服务器端示例，请参阅此答案 Add 'Watermark' to images with php

如何在图像上永久设置视频图标

1 个答案: