使前景透明，但不使背景透明

Question

我正在做一些嘗試，並提出了以下挑戰，但現在我無法解決。 我正在為Flyspray錯誤跟蹤器創建用戶腳本。 在問題列表中，有一列指示完成百分比：

該系統相當陳舊，因此具有一定的簡單性。 這是進度的HTML：

<td class="task_progress">
    <img src="/themes/Bluey/percent-70.png" alt="70%">
</td>

干凈簡單。 現在，我要做的是將鼠標移動的進度移到<img>上方，而不更改HTML。 如果我可以將`前景設為半透明並設置CSS漸變背景，則可以完成此操作。

我可以通過將<img>包裝在<span>來解決此問題，但這非常笨拙。

 const wrapped = document.querySelector("#wrapped"); const img = wrapped.querySelector("img"); const box = img.getBoundingClientRect(); //wrapped.style.height = (box.bottom-box.top)+"px"; const bg = "linear-gradient(to right, rgba(0,38,114,1) 0%,rgba(0,38,114,1) 50%,rgba(0,38,114,0) 51%,rgba(0,38,114,0) 100%)"; console.log(wrapped); wrapped.addEventListener("mousemove", (e)=>{ const box = wrapped.getBoundingClientRect(); const mousePos = e.clientX - box.left; const max = box.right-box.left; const perc = 100*(mousePos/max); const gradient = bg .replace("50%", (perc-0.5)+"%") .replace("51%", (perc+0.5)+"%"); //console.log(gradient); ///console.log(perc); wrapped.style.backgroundImage = gradient; wrapped.style.color = "red"; }, {capture: false}); 

 #wrapped { display: inline-block; margin: 0px; padding: -1px; border-width: 1px; border-color:transparent; border-style: solid; position: relative; background-position: center center; background-repeat: no-repeat; background-size: 0px 0px; } #wrapped img { margin: 0px; padding: 0px; position: relative; top:0px; left: 0px; } #wrapped:hover img { opacity: 0.3; } #wrapped:hover { /*border-color:#002672;*/ background-size: 100% 8.82px; } 

 <span id="wrapped"><img src="https://i.stack.imgur.com/lymku.png" /></span> 

上述解決方案的主要問題：包裝器的高度與<img>高度不匹配，這意味着背景尺寸必須精確設置為一個像素。

沒有任何包裝元素，有沒有辦法做到這一點？

請注意，這是一個練習/學習的問題，通過其他方式解決整個問題的解決方案對我沒有用。

Answer 1

不要使用具有透明顏色的漸變。 僅使用純色並控制background-size然后只需使img塊元素避免出現空白問題即可：

不知道沒有包裝是否有可能，因為您將需要一個元素來應用漸變：

 const wrapped = document.querySelector("#wrapped"); const img = wrapped.querySelector("img"); const box = img.getBoundingClientRect(); //wrapped.style.height = (box.bottom-box.top)+"px"; const bg = "linear-gradient(rgba(0,38,114,1),rgba(0,38,114,1))"; console.log(wrapped); wrapped.addEventListener("mousemove", (e)=>{ const box = wrapped.getBoundingClientRect(); const mousePos = e.clientX - box.left; const max = box.right-box.left; const perc = 100*(mousePos/max); //console.log(gradient); ///console.log(perc); wrapped.style.backgroundSize =perc+"% 100%"; wrapped.style.color = "red"; }, {capture: false}); 

 #wrapped { display: inline-block; margin: 0px; /*padding: -1px; there is no negative padding */ border-width: 1px; border-color:transparent; border-style: solid; background-position:left; background-repeat: no-repeat; } #wrapped img { display:block; } #wrapped:hover img { opacity: 0.3; } #wrapped:hover { /*border-color:#002672;*/ background-image:linear-gradient(rgba(0,38,114,1),rgba(0,38,114,1)); background-size: 50% 100%; } 

 <span id="wrapped"><img src="https://i.stack.imgur.com/lymku.png" /></span> 

但是您可以考慮使用具有多種背景的想法來避免出現該圖像，並在最后使用一個元素替換該圖像：

 const wrapped = document.querySelector("#wrapped"); wrapped.addEventListener("mousemove", (e)=>{ const box = wrapped.getBoundingClientRect(); const mousePos = e.clientX - box.left; const max = box.right-box.left; const perc = 100*(mousePos/max); wrapped.style.backgroundSize =perc+"% 100%, 60% 100%"; }, {capture: false}); 

 #wrapped { display: inline-block; border-width: 1px; border-style: solid; border-color:rgba(0,38,114,1); height:10px; width:100px; background-image: linear-gradient(transparent,transparent), linear-gradient(rgba(0,38,114,1),rgba(0,38,114,1)); background-size: 60% 100%; background-position:left; background-repeat: no-repeat; } #wrapped:hover { border-color:rgba(0,38,114,0.5); background-image: linear-gradient(rgba(0,38,114,1),rgba(0,38,114,1)), linear-gradient(rgba(0,38,114,0.5),rgba(0,38,114,0.5)); } 

 <span id="wrapped"></span>