Question 209644 in CSS Question posted in
Some basic documentation can be found here.

Css – creating an opaque effect above a div using ::before

enter image description hereI’m trying to get a full width div which has the appearance of a same-height opaque div above it.

I can’t use another div to achieve the opaque effect, so I’m using ::before.

Using the css below, I get the ‘before’ div but it is not opaque, it is like a diluted colour of the main-header div.

Edit:
In the image you can see the blue div with an opaque section above it, when we scroll images and text are still visible through it.

This has to be achieved using ::before if possible.

Edit:
I can get is using transform but it’s not nice:

.main-header {
    position: fixed;
    background-color: #006ab1;
    width:100%;
    height: 60px;
    transform:translateY(60px);

    &::before {
        content: " ";
        bottom: 100%;
        height: 60px;
        background: #fff;
        opacity: 75%;
        display: block;
        transform:translateY(-60px);
    }

Can anyone suggest what to change?

.main-header {
    position: fixed;
    background-color: #006ab1;
    width:100%;
height: 100px;

    &::before {
        content: " ";
        bottom: 100%;
        height: 100px;
        background: #fff;
        opacity: 75%;
        display:block;
    }
}
Tags:

2

Answers


  1. 0

    the ‘opacity: 75%;’ should be on your .main-header

    Login or Signup to reply.
  2. 0

    There’s two possible ways:

    1:. Use the backdrop-filter stlye on the ::after psudo elememt

    .main-header {
  position: fixed;
  background-color: #006ab1;
  width: 100%;
  height: 100px;
}

.main-header::after {
  backdrop-filter: blur(2px);
  height: 100%;
  content: " ";
  display: block;
  bottom: 100%;
  position: sticky;
}
    <div class="main-header">
  <span>I am some content in the Main Header</span>
</div>

    This is probably the better of the two.
    https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter

    2:. Use the filter on the main header

    .main-header {
  position: fixed;
  background-color: #006ab1;
  width: 100%;
  height: 100px;
  filter: blur(2px);
}
    <div class="main-header">I'm some content</div>

    But this makes the whole element blurry, and may not be what you want. You may want to constrain the .main-header element inside of a parent div to unsure no "leakage" if you use this option…
    https://developer.mozilla.org/en-US/docs/Web/CSS/filter

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search