Images in callouts should not be transparent

[jhgfd]

i’m not sure what exactly is going on with images in callouts in some themes, but the transparency (i’m not even sure if it’s actual transparency or some kind of color filter) looks bad. i’m trying to fix this with css, but nothing works.

current attempt:

.callout .callout-content img {
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  all: revert !important; /* Reverts all styles to default */
}

this doesn’t change anything. does someone know how to fix this? please, it looks so horrible T_T

[yen_le]

If your embedded image has transparent background then unless the theme bg is white, it’s going to look see-through.

[jhgfd]

how do i even find out if images have a transparent background? it seems to affect all of them anyway, not just some, it just looks worse in some. also it’s not like this in all themes, just some? it’s also ONLY in callouts, nowhere else

[jhgfd]

example with discordian where it’s exceptionally bad to the point images are not really visible anymore

what the image would look like without this “filter”

this is only an example. ALL images are affected by this no matter which type/file format

[ariehen]

Callouts do have a mix-blend-mode applied by default, but themes may handle it differently.

What’s the exact theme in question and the markdown in the note? It is a just an image in a callout, an image in a nested callout, etc.?

Information like that could help in getting to the root of why it’s happening.

[jhgfd]

this in the screenshot is the discordian theme, but it also happens in some others, such as feather and golden/pink topaz.

the markdown for the image is just ![[image]], nothing else.
it’s not nested, the image is just literally in place of “Contents”.

[ariehen]

This adjusts it on my end using the Discordian theme.

body {
    --callout-blend-mode: normal;
}

Reading view: no snippet | with snippet

[jhgfd]

yes!!! this fixes it in all of them! thank you so much!

[ariehen]

Great! Glad it worked out. Have a look at:

CSS variables - Developer Documentation

The variables won’t cover everything, but take care of most common things.

Also:

Obsidian CSS Inspector Workflow

Obsidian CSS Inspector Workflow This was originally called “Obsidian CSS Quick Guide” but it ended up being more focused on the inspector. As a retrospective change to help people use this as a resource, it has been renamed. – FireIsGood Hi friends! CSS in Obsidian can be confusing to get into, so this is a guide to get you started with information on the tools, methods, and some background knowledge! Let’s get started by looking at how you can look behind the curtain of Obsidian’s visuals. …