html 中在怎么加图片水印
时间: 2024-03-13 20:45:52 浏览: 26
在 HTML 中添加图片水印可以通过 CSS 的 `background-image` 属性实现。以下是一个例子:
```
<div class="watermark">
<p>这是一段文本</p>
</div>
<style>
.watermark {
position: relative;
background-image: url(水印图片路径);
background-repeat: repeat;
background-position: center;
background-size: 100px 100px;
}
.watermark p {
color: white;
}
</style>
```
在上面的例子中,通过设置 `.watermark` 的 `position` 属性为 `relative`,让其成为一个相对定位的元素。然后,通过 `background-image` 属性来添加水印图片。`background-repeat` 属性设置为 `repeat`,让水印图片重复填充整个 `.watermark` 元素。`background-position` 属性设置为 `center`,让水印图片居中。`background-size` 属性设置为 `100px 100px`,限制水印图片的大小为 `100px x 100px`。最后,通过设置 `.watermark p` 的 `color` 属性为 `white`,使文本内容在水印图片上可见。
这样就可以在 HTML 中添加图片水印了。
相关问题
html 中在怎么加图片水印,不能使用背景图片
如果不想使用背景图片来添加水印,可以使用 `<img>` 标签来实现。以下是一个例子:
```
<div class="watermark">
<p>这是一段文本</p>
<img src="水印图片路径" alt="水印图片" class="watermark-img">
</div>
<style>
.watermark {
position: relative;
}
.watermark-img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0.2;
pointer-events: none;
}
</style>
```
在上面的例子中,通过在 `.watermark` 元素中添加一个 `<img>` 标签来插入水印图片。`.watermark-img` 类用于设置水印图片的样式。`position` 属性设置为 `absolute`,让水印图片相对于 `.watermark` 元素进行绝对定位。`top` 和 `left` 属性为 `50%`,将水印图片居中。`transform` 属性设置为 `translate(-50%, -50%)`,使水印图片在垂直和水平方向上都居中。`opacity` 属性设置为 `0.2`,设置水印图片的透明度,以达到水印效果。最后,将 `pointer-events` 属性设置为 `none`,使水印图片不可点击。
这样就可以在 HTML 中添加图片水印了,而且不需要使用背景图片。
vue2 图片加水印
在 Vue 2 中给图片加水印,你可以使用 HTML5 的 Canvas API 来实现。下面是一个简单的示例代码:
首先,在你的 Vue 组件中添加一个 `<canvas>` 元素和一个 `<img>` 元素来展示原始图片和加水印后的图片:
```html
<template>
<div>
<canvas ref="canvas" style="display: none;"></canvas>
<img ref="image" :src="originalImage" alt="Original Image">
<img :src="watermarkedImage" alt="Watermarked Image">
</div>
</template>
```
然后,在组件的 `mounted` 生命周期钩子中,获取 `<canvas>` 元素和原始图片,并在 Canvas 上绘制水印:
```javascript
<script>
export default {
data() {
return {
originalImage: 'path/to/original-image.jpg'
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)