如何使用纯CSS渐变边缘一个div？

Question

如何使用纯CSS渐变边缘一个div？

css

87

只使用一个div（没有背景图片/前景图片/图层），能否实现这个效果？

- antonpug

使用有序列表<ol>代替<div>是否可以？在语义上对我来说是正确的。 - Fabrizio Calderan

1

这只是一个例子。实际上，该div中有复杂的项目。 - antonpug

ol或div在你的问题上下文中并不重要。 - Paulie_D

在 <ol> 标签内部，只需将其子元素的 display 属性设置为 block 即可。 - gramgram

4

<ol>在这里有何相关性？我想问的只是一个元素是否能在一端没有图层的情况下被模糊处理。 - antonpug

@antonpug 我知道实际上没有什么区别，但我更喜欢在建议之前先询问，以免提出不适合您需求的建议。 - Fabrizio Calderan

3个回答

18

个人认为，将一个次要元素作为“重叠”使用效果非常好。我通过定义一个新的tag来实现这一点。这样就可以轻松地对任何你想要的元素添加所需的淡出效果，只需在结尾处使用<fade/>。

div {
    position: relative;
}

fade {
    position: absolute;
    bottom: 0px;

    display: block;
  
    width: 100%;
    height: 50px;
  
    background-image: linear-gradient(to bottom, 
        rgba(255, 255, 255, 0), 
        rgba(255, 255, 255, 0.9)
    100%);
}

<div>
    text
    <br>
    text
    <br>
    text
    <fade/>
</div>

为 fade 元素设置绝对位置和渐变背景与预期相同，只要您记得将其父元素的位置设置为 relative。

- Aleksander Azizi

2

只有当内容位于白色容器上时，此方法才有效。如果下面的颜色不同，这将看起来很奇怪。当然，可以更改颜色以匹配背景，但如果背景不是纯色，例如渐变或图片，则会出现问题。 - Bruno Finger

如果您想要淡化边缘，这在导航菜单上效果很好。这里展示的其他方法会阻止用户点击链接。当然，您需要两个淡出元素，一个在每一侧。我尝试了许多不同的方法，直到这个方法起作用。感谢@Aleksander Azizi！ - John Meyer

6

<style>
.fade {
    position: relative; 
    bottom: 4em;
    height: 4em;
    background: -webkit-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    ); 
    background-image: -moz-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    background-image: -o-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    background-image: linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    background-image: -ms-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
}
</style>

这里有一个示例给你参考 http://jsfiddle.net/nrgx7/

- user3439263

2

谢谢。但是这并没有回答我的问题。你的解决方案需要添加第二个 .fade 元素来适应淡入淡出。 - antonpug

摆脱div，只需将其作为伪元素处理：http://jsfiddle.net/nrgx7/129/ - A Friend

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Fabrizio Calderan · Accepted Answer

您可以在一个应用了渐变的伪元素上重叠。

ol {
  border: 1px #d8d8d8 dashed;
  font: 2em/1.6em Arial;
  position: relative;
}

ol:after {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  pointer-events: none;
  background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255, 1) 90%);
  width: 100%;
  height: 4em;
}

<ol>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
</ol>

由于将pointer-events设置为none，渐变下方的文本也将无法被选择或点击。

更新 03.2023

使用 mask 属性可以实现相同的效果。

ol {
  --mask: linear-gradient(to bottom, 
      rgba(0,0,0, 1) 0,   rgba(0,0,0, 1) 40%, 
      rgba(0,0,0, 0) 95%, rgba(0,0,0, 0) 0
  ) 100% 50% / 100% 100% repeat-x;
  
  border: 1px #d8d8d8 dashed;
  font: 2em/1.6em Arial;
  -webkit-mask: var(--mask); 
  mask: var(--mask);
  
}

<ol>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
</ol>