How can I change the brightness of html embedded images?

[enri]

What I’m trying to do

I’ve read though this guide that shows how to get images on the Canvas without the node borders,
Now I just want to know if I can modify the brightness of the embedded images

here’s the snippet I used for the images in the canvas nodes

.canvas-node:has(.canvasimage) {
	.canvas-node-container:has(.canvasimage) {
    border: none;
}
.canvas-node-container:has(.canvasimage) {
    border-radius: 0;
}
.markdown-preview-view.canvasimage {
    padding: 0px !important;
    overflow: visible;
}
.markdown-preview-view.canvasimage::before {
    display: none !important;
}
.markdown-preview-view.canvasimage p {
    margin: 0 !important;
}
.canvas-node-container {
    border-width: 0;
}
.is-focused.canvas-node .canvas-node-container {
    border-width: 2px;
}
.canvas-wrapper {
  --shadow-stationary: none;
}
}

Things I have tried

I’m a complete noob when it comes to html and css so the best I could do was google it and ask chatGPT to help me out.
What I think I need to do is add

img:has(.canvasimage) {
filter: brightness(20%);
}

to the snippet, but that doesn’t work for some reason. If I remove the :has(.canvasimage) then it applies the filter to all images in the vault, so I must be missing something super simple here. I don’t know.
appreciate the help

[enri]

I figured out the correct way to write it

.canvasimage img {
    filter: brightness(50%);
}