js插件图片变暗加文字

基础概念

在JavaScript中，图片变暗并添加文字通常涉及到图像处理和DOM操作。这可以通过CSS滤镜来实现图像变暗的效果，并通过HTML和CSS来添加文字。

类型

CSS滤镜：使用CSS的filter属性来改变图像的亮度。
Canvas绘图：使用HTML5 Canvas API在图像上绘制文字。
第三方库：使用如jQuery插件等简化操作。

应用场景

产品展示：在电商网站上突出显示产品特点。
新闻报道：在新闻图片上添加标题或摘要。
社交媒体：在用户上传的照片上自动添加地理位置或心情标签。

示例代码

以下是一个简单的示例，展示如何使用CSS滤镜和HTML来实现在图片上添加文字并使图片变暗的效果。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Darken with Text</title>
<style>
  .image-container {
    position: relative;
    display: inline-block;
  }
  .image-container img {
    width: 100%;
    filter: brightness(50%); /* 图片变暗 */
  }
  .overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 2em;
    text-shadow: 2px 2px 4px #000000;
  }
</style>
</head>
<body>

<div class="image-container">
  <img src="your-image-url.jpg" alt="Sample Image">
  <div class="overlay-text">Your Text Here</div>
</div>

</body>
</html>