# 如何实现类似 iOS 的半透明模糊标题栏

**URL:** <https://meta.discourse.org/t/how-to-have-an-ios-like-tranlucent-blurry-header/97108>\
**Category:** UX\
**Created:** [2018 年9 月 13 日 10:46 UTC](https://meta.discourse.org/t/how-to-have-an-ios-like-tranlucent-blurry-header/97108 "2018-09-13T10:46:06Z")\
**Posts on this page:** 1\
**Showing post:** 3

<div class="post-metadata">

作者： ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)\
发布日期： [2018 年9 月 13 日 13:07 UTC](https://meta.discourse.org/t/how-to-have-an-ios-like-tranlucent-blurry-header/97108/3 "2018-09-13T13:07:54Z")

</div>

Frankly, it’s a bit easier to make a design like that work on one static page with very large text and a black background. So a gentle heads up, you’re in for a bit of work.

The header background is set via a color-scheme variable. The name of that variable is `$header_background`

Color-scheme colors are always opaque since they are RGB hex colors - `#ffffff` for example.  
What you need is an RGBA color since those have an alpha parameter which you can use to control the opacity of the color.

a semi-translucent RGBA black color looks like this

`rgba(0,0,0, .8)`

Since Discourse uses scss, you can use something like this to control the opacity of the header background color:

```plaintext
.d-header {
  background-color: rgba($header_background, 0.8);
}

```

which takes the header background - whatever it may be for your current color-scheme - and sets its opacity to `0.8`

This creates something like the what you see below

 ![3](https://global.discourse-cdn.com/meta/original/3X/3/9/39d0668eddcd261263513e90ccd1a9ee5fb4777b.png)

However, that’s not they only thing used on the Apple website, they also use a gradient under the header to give the illusion of page elements fading out as they go under the header.

 ![3](https://global.discourse-cdn.com/meta/original/3X/f/2/f2b4b3ea09eb24f2bafb46e8c5aff8f73ac0c6bf.png)

which you can achieve using something like this: (I grabbed this from Apple’s website and modified it a bit)

```plaintext
.d-header:after {
  content: "";
  position: absolute;
  top: 100%;
  height: 100px;
  width: 100%;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.79) 8.1%,
    rgba(0, 0, 0, 0.761) 15.5%,
    rgba(0, 0, 0, 0.717) 22.5%,
    rgba(0, 0, 0, 0.66) 29%,
    rgba(0, 0, 0, 0.593) 35.3%,
    rgba(0, 0, 0, 0.518) 41.2%,
    rgba(0, 0, 0, 0.44) 47.1%,
    rgba(0, 0, 0, 0.36) 52.9%,
    rgba(0, 0, 0, 0.282) 58.8%,
    rgba(0, 0, 0, 0.207) 64.7%,
    rgba(0, 0, 0, 0.14) 71%,
    rgba(0, 0, 0, 0.083) 77.5%,
    rgba(0, 0, 0, 0.039) 84.5%,
    rgba(0, 0, 0, 0.01) 91.9%,
    transparent 100%
  );
}

```

If you add that, you’d need to modify the padding of the `#main-outlet` a bit so that items at the top of the page are not covered by the gradient before you scroll.

Something like this should work

```plaintext
#main-outlet {
  padding-top: 8em;
}

```

The example on Apple’s website works really well because it’s black on black and the text is very large like I mentioned earlier. You might have spend a bit of time playing around with the colors to get it to look as nice on your site.

I created a _basic_ black on black demo on theme creator for this which you can see [here](https://theme-creator.discourse.org/theme/Johani/header-fade)

It works on both desktop and mobile but if you only want it to be on the mobile view, add the code to the mobile section of your theme / theme component.

---

_[View the full topic](https://meta.discourse.org/t/how-to-have-an-ios-like-tranlucent-blurry-header/97108)._