Question

图像1和2位于图像0的顶部。它们具有透明背景。最初显示全部3个。当取消选中该框时，我需要将图像1和2的不透明度更改为0，并在检查时将其更改为1。它应该针对图像1和2单独发生，而不是一起发生。

这是我到目前为止所做的：

<head>
<style>
img {
    position: absolute;
    top: 80px;
    left: 80px;
    width: 624px;
    height: 400px;
    }
.show {
        opacity: 1;
    }
.hide {
        opacity: 0;
    }
</style>
<script>
    function change(checkboxElem) {
    if (checkboxElem.checked) {
        alert("checked")
    } else {
        alert("notchecked")
    }
}    
</script>>
</head>
<body>
<div>
<img src="image0.png">
<img class="show" id="img1" src="image1.png">
<img class="show" id="img2" src="image2.png">
</div>
<form>
    <input type="checkbox" value="1" onchange="change(this)" checked>Blue<br>
    <input type="checkbox" value="2" onchange="change(this)" checked>Red<br>
</form>
</body>

我知道我需要将值传递给函数更改，但不知道该怎么做（this.value？）
更改功能应仅将所选图像的不透明度更改为0或1
我也不知道如何编写HTML / CSS来实现
截至目前，出于某种原因，我看到＆gt;显示在页面顶部。我该如何摆脱它？

Answer 1

首先，您需要为图像添加ID，以便您可以控制它们：

byte[] utf8Bytes = Encoding.UTF8.GetBytes(str);
byte[] unicodeBytes = Encoding.Convert(Encoding.UTF8, Encoding.Unicode, utf8Bytes);
str = Encoding.Unicode.GetString(unicodeBytes);

然后你应该使用ExtTextOut：

而不是透明度

<img class="show" ID="img1" src="image1.png">
<img class="show" ID="img2" src="image2.png">

这样，当检查一个元素时，将显示图像，当它被删除时，它将消失。

编辑 - 添加了一个jsfiddle链接： https://jsfiddle.net/u6a0ze6m/5/

使用JavaScript或JQuery更改所选图像的不透明度

1 个答案: