How can I change the brightness of html embedded images?

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 :slight_smile:

I figured out the correct way to write it :stuck_out_tongue:

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

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.