Question

我将屏幕分为两部分，第一部分是图像，然后向下滚动时会出现带有文本和特定颜色背景的块。

正如您在我的演示中看到的，变化非常突然，我希望在图像和带有文本内容的 div 之间进行排序模糊。我该怎么做？

const App = () => {

  return (
  <div className='wrapper'>
    <div className='hero'></div>
    <div className='content'>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa enim nec dui nunc. Eu augue ut lectus arcu bibendum at varius vel pharetra. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi. Sed risus ultricies tristique nulla aliquet enim tortor at. Tortor condimentum lacinia quis vel. At imperdiet dui accumsan sit amet. Metus dictum at tempor commodo ullamcorper. Fames ac turpis egestas maecenas pharetra convallis posuere. Sit amet justo donec enim diam vulputate ut.


    </div>
  </div>
  )
}


ReactDOM.render(
    <App />,
    document.getElementById('app')
);

.wrapper {
        width: 300px;
        height: 300px;
}

.hero {
        width: 100%;
        height: 100%;

        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    background-image: url("https://placekitten.com/1000");
}

.content {
  padding: 10px;
  padding-top: 20px;
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Answer 1

尝试在图像顶部添加一个伪元素并在其上应用背景渐变。我修改了您的示例以展示如何完成。

const App = () => {

  return (
  <div className='wrapper'>
    <div className='hero'></div>
    <div className='content'>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa enim nec dui nunc. Eu augue ut lectus arcu bibendum at varius vel pharetra. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi. Sed risus ultricies tristique nulla aliquet enim tortor at. Tortor condimentum lacinia quis vel. At imperdiet dui accumsan sit amet. Metus dictum at tempor commodo ullamcorper. Fames ac turpis egestas maecenas pharetra convallis posuere. Sit amet justo donec enim diam vulputate ut.


    </div>
  </div>
  )
}


ReactDOM.render(
    <App />,
    document.getElementById('app')
);

.wrapper {
   width: 300px;
   height: 300px;
}

.hero {
   position: relative;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   background-image: url("https://placekitten.com/1000");
}

.hero::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 2rem;
   background: rgb(255,0,0);
   background: linear-gradient(180deg, rgba(255,0,0,0) 0%, rgba(255,0,0,1) 100%);
}

.content {
  padding: 10px;
  padding-top: 20px;
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Answer 2

您可以考虑蒙版，它适用于所有图像和背景颜色

const App = () => {

  return ( <
    div className = 'wrapper' >
    <
    div className = 'hero' > < /div> <
    div className = 'content' >
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Massa enim nec dui nunc.Eu augue ut lectus arcu bibendum at varius vel pharetra.Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi.Sed risus ultricies tristique nulla aliquet enim tortor at.Tortor condimentum lacinia quis vel.At imperdiet dui accumsan sit amet.Metus dictum at tempor commodo ullamcorper.Fames ac turpis egestas maecenas pharetra convallis posuere.Sit amet justo donec enim diam vulputate ut.


      <
      /div> <
      /div>
  )
}


ReactDOM.render( <
  App / > ,
  document.getElementById('app')
);

.wrapper {
  width: 300px;
}

.hero {
  height: 300px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("https://placekitten.com/1000");
  /* code added */
  margin-bottom:-30px;
  -webkit-mask:linear-gradient(#fff calc(100% - 30px), transparent);
  /**/
  
}

.content {
  padding: 10px;
  padding-top: 30px;
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

具有彩色背景的图像和块之间的颜色过渡区域

2 个答案: