在 css 类中使用 Javascript 图像路径答案

【问题标题】：Use Javascript image path inside css class在 css 类中使用 Javascript 图像路径
【发布时间】：2019-01-30 11:01:38
【问题描述】：

背景

在website 中，我显示蒙版图像路径如下：

<script>
var cardConfig = { "pages": [{ "name": "/images/invitations/birthday/ice1.png", }], }
</script>

我允许用户在掩码图像中上传图像....

一旦用户上传图片，我将在 mask 图片中填充用户上传图片：

1.蒙版图片：

2.用户上传图片：

3.用户上传的蒙版图片 [最终图片]：

代码笔：https://codepen.io/kidsdial2/pen/OdyemQ

JSfiddle：http://jsfiddle.net/2xq8p0zy/

HTML

<body>
  <img src="http://139.59.24.243/images/invitations/birthday/a.jpg" alt="">
</body>

css

body {
  background-color: #111;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

img {
  margin: 20px auto;
  display: block;
  width: 100%;
  height: 500px;
  -webkit-mask-image: url(http://139.59.24.243/images/invitations/birthday/ice.png);
  mask-image: url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/mask-image/mask-image.png);
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

要求：

这里要在遮罩图像中填充上传的图像，我使用下面的 css 代码来显示遮罩图像....但是，我不想使用 css 代码遮罩图像，而是在此过程中使用 html 代码遮罩图像.... ..

css 蒙版图片代码

-webkit-mask-image: url(http://139.59.24.243/images/invitations/birthday/ice.png);

Html 蒙版图片代码：

<script>
    var cardConfig = { "pages": [{ "name": "/images/invitations/birthday/ice1.png", }], }
    </script>

【问题讨论】：

我发誓我上周看到了一个非常相似的问题。你是再问这个问题还是问其他队友？
哦。也看到了你的其他 2 个问题。您是否打算通过社区完成所有工作？
@AdityaGupta 感谢您的 cmets，所有问题都是不同的，请再次阅读，我在发布一个问题之前尝试了很多......
似乎如此。我已经为你的第一个问题添加了书签。很酷的东西
跟踪和背景信息，这个和stackoverflow.com/questions/54364232有关

标签： javascript html css

【解决方案1】：

您必须在 js 中以编程方式更改样式。像这样：

const targetDiv = document.getElementById('target')

function changeColorTo(hex) {
  // you can change single attributes like this
  targetDiv.style.backgroundColor = hex
  
  // alternatively you can override all of the local styles like this
  targetDiv.setAttribute('style', `background-color:${hex};`)
  // or
  targetDiv.style.cssText = `background-color:${hex};`
}

#target {
  width: 5rem;
  height: 5rem;
  border: 1px solid black;
}

<div id="target"></div>
<button onclick="changeColorTo('#00f')">Change to Blue</button>
<button onclick="changeColorTo('#0f0')">Change to Green</button>
<button onclick="changeColorTo('#f00')">Change to Red</button>

同样的方法，你可以改变掩码：

target.style.webkitMaskImage = 'url(https://…)'
target.style.maskImage = 'url(https://…)'

【讨论】：