Color of slide number affected by background-image

[pat-s]

When using a background-image within a slide, the color of the slide number is somehow affected. Here is an example using green text color on white background:

White becomes somewhat greyish and all other colours also become darker.

.remark-slide-number {
  color: green;
  background-color: white;
}

[tripu]

@pat-s, can you point us at a specific (complete) example?

[pat-s]

@tripu I am using this implementation of remark.js.

Using a custom css file, I can modify remark.js classes. Since the xaringan implementation is not pure remark.js but uses R in the background, I can only talk about the css class modifications and not provide a complete example (as it would not be executable by you).

As mentioned above, I modified the .remark-slide-number class. Furthermore I use a layout to apply the background image:

layout: true

background-image: url(img/FSU/4-3/layout_4-3.png)
background-size: cover

This background image contains a blue bar as footer. When drawing both the slide number and the background-image, the weird colouring appears.

Here is the complete modification of .remark-slide-number:

.remark-slide-number {
  color: green;
  background-color: white;
  margin-bottom: -11.6px;
  margin-right: 20px;
  border-radius: 0px;
  padding: 1.6px;
}

[tripu]

@pat-s: sorry, I don't understand. You are forcing that style (green on white) for the slide numbers yourself using CSS, right? What is the issue, then?

See this pen. The first slide has a background image, and the slide number at the bottom is still shown in grey over a transparent background.

Can you reproduce the issue by forking this pen?

[tripu]

(Nothing like reading things twice :smirk:)

I think I understand now.

.remark-slide-number has an opacity of 50% by default. Colours there will be mixed with whatever is in the background (in your case, white in the background and green for the font).

Make sure you override that opacity if you need to.

[pat-s]

Thanks for pointing me to remark.less and opacity! That fixed it. Exhausting finding the defaults of all classes. :relieved: