背景
在website ，我正在显示如下蒙版图像路径:
<script>
var cardConfig = { "pages": [{ "name": "/images/invitations/birthday/ice1.png", }], }
</script>
我允许用户上传蒙版图像中的图像....
一旦用户上传图片，我就会在mask image 中填充user uploaded image :
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 mask 图片代码
-webkit-mask-image: url(http://139.59.24.243/images/invitations/birthday/ice.png);
Html mask 图片代码:
<script>
var cardConfig = { "pages": [{ "name": "/images/invitations/birthday/ice1.png", }], }
</script>
最佳答案
您必须在 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>同理，你可以改变 mask :
target.style.webkitMaskImage = 'url(https://…)'
target.style.maskImage = 'url(https://…)'
关于javascript - 在 css 类中使用 Javascript 图像路径，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54439028/