Placing a circle above a div for full opacity [closed]

1 day ago 4
ARTICLE AD BOX

The page in question: https://pihosting.ca/dnd/battle.php

Im attempting to create a DND character sheet Final fantasy themed. When you load the page you can see an empty div container positioned near the face of the background image setting it up as an avatar holder. The circle i outlined is roughly where i would like it placed so you can see the background image completely and not have slight opacity like the other div containers.

I know that you cant have a child element lower the opacity of the parent element but a trick has to exist somewhere to achieve this neatly within the div container?

Derek Hill's user avatar

3

The website link contains the example. And I needed to include certain elements to make sure my point gets across when I was describing something. It provides the back image so you can get what I'm trying to do.

2026-04-27 16:02:33 +00:00

Commented 15 hours ago

One of the problems with your response is - what happens when you correct the site so it no longer shows the point you are trying to make? Or when that site no longer exists. We’d like to help you, but the question and its solution need to be here so it’s useful even when you have moved on. Please read the info @David has pointed to.

2026-04-27 17:42:31 +00:00

Commented 14 hours ago

Read Entire Article