- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont?
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
我在 div 中有一张图片。我需要添加一个水印效果,或者基本上是另一个图像,覆盖图像 div。我怎样才能用 css 做到这一点?
示例代码:
<div id="image">
</div>
CSS:
#image {
background:url(images/images.png) no-repeat;
}
最佳答案
至少有两种方法可以做到这一点,@erenon 的回答已经提到了其中一种。
为了满足您的要求并使用图像:
<div id="image">
<img src="path/to/watermarking_image.png" alt="..." />
</div>
使用以下 CSS:
#image {
/* the image you want to 'watermark' */
height: 200px; /* or whatever, equal to the image you want 'watermarked' */
width: 200px; /* as above */
background-image: url(path/to/image/to/be/watermarked.png);
background-position: 0 0;
background-repeat: no-repeat;
position: relative;
}
#image img {
/* the actual 'watermark' */
position: absolute;
top: 0; /* or whatever */
left: 0; /* or whatever, position according to taste */
opacity: 0.5; /* Firefox, Chrome, Safari, Opera, IE >= 9 (preview) */
filter:alpha(opacity=50); /* for <= IE 8 */
}
#image {
/* the image you want to 'watermark' */
height: 200px;
/* or whatever, equal to the image you want 'watermarked' */
width: 200px;
/* as above */
background-image: url(https://www.davidrhysthomas.co.uk/linked/astrid_avatar.png);
background-position: 0 0;
background-repeat: no-repeat;
position: relative;
}
#image img {
/* the actual 'watermark' */
position: absolute;
top: 0;
/* or whatever */
left: 0;
/* or whatever, position according to taste */
opacity: 0.5;
/* Firefox, Chrome, Safari, Opera, IE >= 9 (preview) */
filter: alpha(opacity=50);
/* for <= IE 8 */
}
<div id="image">
<img src="https://www.davidrhysthomas.co.uk/linked/watermark.png" alt="..." />
</div>
这应该生成如下内容:
+--------------+--------------+
| | |
| 'watermark' | |
| | __ |
+--------------+ / \ |
| ( ) |
| /\ \ / |
| / \ || | <-- Picture. Of...something. O_o
| /\ / \ || |
|/ \________/ \_()||_()(|
+-----------------------------+
另一种方法,假设您想要“水印”的只是“一个词”,那就是使用词:
<div id="image">
<p>Watermark text</p>
</div>
以及以下 CSS:
#image {
/* the image you want to 'watermark' */
height: 200px; /* or whatever, equal to the image you want 'watermarked' */
width: 200px; /* as above */
background-image: url(path/to/image/to/be/watermarked.png);
background-position: 0 0;
background-repeat: no-repeat;
position: relative;
}
#image p {
/* the actual 'watermark' */
position: absolute;
top: 0; /* or whatever */
left: 0; /* or whatever, position according to taste */
opacity: 0.5; /* Firefox, Chrome, Safari, Opera, IE >= 9 (preview) */
filter:alpha(opacity=50); /* for <= IE 8 */
}
#image {
width: 200px;
height: 200px;
background-image: url(https://www.davidrhysthomas.co.uk/linked/astrid_avatar.png);
background-position: 0 0;
background-repeat: no-repeat;
position: relative;
}
#image p {
/* the actual 'watermark' */
position: absolute;
top: 0;
/* or whatever */
left: 0;
/* or whatever, position according to taste */
opacity: 0.5;
/* Firefox, Chrome, Safari, Opera, IE >= 9 (preview) */
filter: alpha(opacity=50);
/* for <= IE 8 */
}
<div id="image">
<p>Watermark text</p>
</div>
这应该生成如下内容:
+--------------+--------------+
| | |
| watermark | |
| text | __ |
+--------------+ / \ |
| ( ) |
| /\ \ / |
| / \ || | <-- Picture. Of...something. O_o
| /\ / \ || |
|/ \________/ \_()||_()(|
+-----------------------------+
我知道这个问题的回答可能令您满意,但我希望这对您有所帮助,即使只是作为一般信息。
已更新以添加 SVG 选项,但请记住,在此示例中,“水印”文本是可选的,并且可以检查 SVG 元素以检索图像 URL:
svg {
width: 300px;
height: 300px;
border: 2px solid #000;
}
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
/* adjusting the fill, colour and transparency,
of the watermark text while the SVG is hovered */
svg:hover .watermark {
fill: #666f;
font-size: 2.1em;
}
/* defining the default style of the watermark */
.watermark {
fill: #bbbb;
font-size: 2em;
font-family: Ubuntu, Calibri, sans-serif;
font-weight: bold;
transition: all 0.3s linear;
}
</style>
<!-- the image that you want to be watermarked: -->
<image xlink:href="http://www.davidrhysthomas.co.uk/linked/astrid_avatar.png" height="200px" width="200px" />
<!-- the watermark text: -->
<text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" class="watermark">watermark</text>
</svg>
关于css - 用CSS添加 "Watermark"效果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1625706/
我正在使用水印文本框,如 Watermark TextBox in WPF 如何将其应用于 PasswordBox? 最佳答案 一般方法是相同的:您编
我是引导世界的新手。有没有办法使用 Bootstrap 放置水印?如果有,请帮助我提供示例代码: Watermark sample code
我需要保护我的客户可以私下访问的数据。我的数据不在任何文档中,而是在 plain text 中,例如 JSON 字符串。我想保护我的数据不被修改,然后在未经我许可的情况下重新分发。 我在网上查了一段时
我需要保护我的客户可以私下访问的数据。我的数据不在任何文档中,而是在 plain text 中,例如 JSON 字符串。我想保护我的数据不被修改,然后在未经我许可的情况下重新分发。 我在网上查了一段时
有人可以帮我找到一个库,或者算法的详细描述,可以将数字水印(隐形水印,只是一种隐写术)嵌入到 jpeg/png 文件中。但算法的质量应该很棒。图像旋转和扩展(如果可能)后应该可以提取该标记。 Mark
🌿今天我们来了解一下flink中的几个重要基础概念:time、watermark、state,这是flink流处理中实现数据流执行速度快和结果正确的要点,对往期内容感兴趣的同学可以看下面👇: 链接
我有一个关于 FFMpeg 的问题。我想“注入(inject)”一个 mp3(嘟嘟声)文件一次,例如5 秒进入另一个 mp3 文件。你们中的任何人都可以为我提供一些如何执行此操作的指导吗? 非常感谢!
这个问题在这里已经有了答案: How do I make an HTML text box show a hint when empty? (22 个答案) 关闭 6 年前。 我想知道如何在页面加载
我在多个文件上运行 ImageMagick mogrify 时遇到一个奇怪的问题。我使用转换字符串对图像进行多次转换,从而生成缩略图。带有转换字符串的命令在单个文件上运行良好,但是在批量文件上运行时有
我正在从数据流管道中的 PubSub 主题读取记录。 PubSub 记录分为固定窗口,然后在每个窗口上分组。每个窗口都按序列号排序,因为我们需要使用 beam.SortValues 按顺序处理这些记录
我在 div 中有一张图片。我需要添加一个水印效果,或者基本上是另一个图像,覆盖图像 div。我怎样才能用 css 做到这一点? 示例代码: CSS: #image { background
在我目前的工作场所,我们正在使用 Team Foundation Server (TFS)(我相信是 2015 年),在我目前的工作场所,我注意到“水印”字段——它是什么意思/代表什么? 最佳答案 此
水印我的意思是: 以某种方式集成到 .exe/.dll 文件中的字节数组,可以搜索该文件。 许多反盗版/反逆向工程程序包括一个称为“水印”的系统作为特征。例如 VMProtect。 这是如何运作的?
好的,我熟悉整个概念,并且我已经成功地为 NSImage 添加了“水印”。 我就是这样做的: - (void)maskOne:(NSString*)filename atTarget:(NSStrin
我看到了有关 adding watermark on images with php 的精彩问题和答案 我也想用 ASP.NET 做同样的事情 这里有几个问题。 如何使用 ASP 做到这一点? 此过程
我正在尝试在图像和视频上添加水印。对于图像我得到了如下的解决方案 图片水印代码 方法 static void addWatermarkOnImage(String text, File sourceI
有没有办法让页面中间的水印显示在可点击按钮后面? http://jsfiddle.net/fg7m3/533/ .watermark { position: absolute; opa
我正在尝试为另一张图片添加图片水印。我有以下代码,但我遇到了问题。我不知道这个 'Resources res' 是什么。 有人能帮忙吗? public static Bitmap addWaterma
废话不说了,贴代码: 复制代码代码如下: <?php /************************************ //函数: wate
我正在尝试使用 videojs-watermark npm 模块,但我得到的错误是: TypeError: player.watermark is not a function. 代码如下: impo
我是一名优秀的程序员,十分优秀!