Question

背景

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

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

我允许用户在蒙版图像中上传图像。...

用户上传图片后，我会在蒙版图片内填充用户上传图片：

1。蒙版图像：

2。用户上传的图片：

3. 用户在蒙版上上传图像 [最终图像]：

Codepen：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>

Answer 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://…)'

在CSS类中使用Javascript图像路径

1 个答案: