Question

I m 试图复制由 Apple普电视+聪明电视产生的效应在我的个人网站上,在背景上有梯度模糊,可追溯到网页的某一点,但一旦你进一步放下,该圆形就会上升,覆盖整个背景形象的网页。

Similar to how when you view a TV Show or movie on the Apple TV+ Smart TV App, the background has a sort of gradient blur over it going down to a specific point on the screen; but when you go further down (Say to view additional episodes of a TV Show or the Special features for a movie) the blur covers the entire background while the background image stays fixed.

Here s a screenshot showing the blur effect beginning towards the bottom of this screenshot over the background image/video

I have a div set up on my site with a blur backdrop filter covering the entire background image:

<div class="blurred-mask-container"></div>

and have my CSS set up like so:

.blurred-mask-container {
  top: 0;
  bottom: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  backdrop-filter: blur(100px);
  z-index: -1;
}

And my goal is to have a gradient transparency going from transparent at the top of the div, then blurry at around 800px down specifically no long the webpage ends up being should I add/remove elements from the page.

Originally I tried setting up my div with two child divs inside: Both with the same Backdrop Filter, only the one on top was 800px tall and had a transparency mask, and the one on the bottom just had a backdrop filter with no mask. However, there was a VERY noticeable interruption in the blur effect where the bottom of the top div with the gradient mask met the top of the bottom div without one; so now I m trying to do this effect in one div.

However every tutorial or set of instructions I ve found so far online, including here, seems to only have steps for applying a gradient transparency to an image such as an image inside a div, or the background image on a website not on a div hovering over the background image that just has a backdrop filter in it. Any help in figuring this out would be greatly appreciated.

<><><> > 为明确起见添加:>>> 我在光店做了一些模拟,以作为Im试图退出的影响的例子。

当你首次装上网页时,背景形象应主要出现在顶端,在底层产生模糊效应,梯度透明度从底层到顶。当你浏览网页时,。镜头应当用滚动棒()更换屏幕。并且,一旦你向某一点投递,。影像效应应覆盖到底部的整个背景形象。

Answer 1

你们想要吗?

body {
    margin: 0;
}

.content {
    font-family: arial;
    color: #fff;
}

.image {
    background-image: url("https://www.stockvault.net/data/2019/08/31/269064/preview16.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100vH;
}

.description {
    position: absolute;
    top: calc(100vH - 200px);
    height: 200px;
    background-image: linear-gradient(0deg, #777, transparent);
    background-repeat: repeat-x;
    width: 100%;
}

.description h1, .description p {
    margin-left: 130px;
    margin-bottom: 0px;
}

.description h1 {
    margin-top: 70px;
}

.description p {
    margin-top: 10px;
}

<div class="content">
    <div class="image"></div>
    <div class="description">
        <h1>Cool title</h1>
        <p> Some description</p>
    </div>
</div>

Answer 2

Looks like backdrop-filter does not allow gradient blur.
But you might make it like this:

*:not(p), *:before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  --bg: #522 url(https://sm.ign.com/t/ign_in/blogroll/v/valorant-w/valorant-will-be-publicly-available-in-june_u2m6.2560.jpg) no-repeat fixed 50% 0 / cover;
  background: var(--bg);
  color: #ffe;
}

header {
  height: 80vh;
  padding: 2em;
}

main {
  position: relative;
  min-height: 100vh;
  padding:  2em;
}

#blurbg {
  position: absolute;
  z-index: -1;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
}

#blurbg:before {
  --r: min(4vmax, 50px);
  content:   ;
  position: absolute;
  top: calc(var(--r) + var(--r));
  right: calc(var(--r) * -5);
  bottom: calc(var(--r) * -5);
  left: calc(var(--r) * -5);
  background: var(--bg);
  filter: blur(var(--r));
}

<header>
  <h1>Header</h1>
</header>
<main>
  <div id="blurbg"></div>
  <h1>Content</h1>
  <p>Valorant s latest update has released before Episode 5 Act II. The new episode will bring a fresh battlepass, competitive reset, a completely free event pass to celebrate Champions 2022, and finally a new skinline, all that has been elaborated in their trailer for Dimension: Act II. Before releasing the new update, Valorant has released the patch 5.04 to bring some quality of life updates to crosshairs and fix some bugs.</p>
  <p>Valorant s latest update has released before Episode 5 Act II. The new episode will bring a fresh battlepass, competitive reset, a completely free event pass to celebrate Champions 2022, and finally a new skinline, all that has been elaborated in their trailer for Dimension: Act II. Before releasing the new update, Valorant has released the patch 5.04 to bring some quality of life updates to crosshairs and fix some bugs.</p>
</main>

友情链接