我试图创建一条线,使用渐变,它对每一侧都是透明的,类似于:Image - A vertical, bright line, that fades into the background on all sides

我已经有点接近于重现这一点.Image - The same except for some minor differences

在我最好的try 中,如上所述,我作弊并将边设置为背景色:

.outer-div:before {
    content: "";
    background:
        /* sides same color as background */
        linear-gradient(to right, rgba(100, 100, 90, 1), rgba(0, 0, 0, 0), rgba(100, 100, 90, 1)),
        linear-gradient(rgba(100, 100, 90, 1) 0, rgba(0, 0, 0, 0) 20% 80%, rgba(100, 100, 90, 1) 100%),
        /* the actual color */
        /*rgba(149, 147, 132, 1);*/
        /* changed to white so it's easier to see */
        rgba(255, 255, 255, 1);
    float: left;
    /* again, changed from 5 to 20px so it's easier to see */
    width: /*5px;*/ 20px;
    height: 112px;
}
<div class="outer-div">
  A div with some text<br/>
  text<br/>
  text<br/>
  text<br/>
  text<br/>
  text
</div>

这是我能想到的最好的了.

有没有人知道如何让两边真正透明?

推荐答案

最简单的方法可能是在gradient上使用blur.

div::before {
  content: '';
  display: block;
  width: 10px;
  height: 150px;
  background: linear-gradient(to bottom, transparent, black 20%, black 50%, transparent);
  filter: blur(3px);
}
<div></div>

Css相关问答推荐

与Chrome和Edge相比,背景位置动画在Firefox中运行并不流畅

如何仅使用CSS Select 器根据列表中第n个项的子项属性 Select 该项

在文本之前添加了额外的空间-Angular 树视图CSS

尽管 URL 路径正确,但背景图像未显示

为什么删除 AnimatePresence framer.div 时会出现轻微卡顿?

混合网格自动布局与固定的行列位置

我如何使用 CSS 在我的应用程序中每隔 3 位用逗号分隔数字?

Img 未拉伸以满足所需的纵横比

更改 20 个实例中的一个组件的样式

是否有一个 CSS 可以根据字符的高度 for each 字符呈现可变高度?

如何使用props 为 Vue 中的组件创建动态背景图像?

如何在 Angular 中使用 CSS 设置 FontAwesome 图标的大小?

ID 在整个页面中必须是唯一的吗?

HTML/CSS 中的单选/复选框对齐

flex-wrap 如何与 align-self、align-items 和 align-content 一起使用?

Angular 动画的目的是什么?

css 中的 clearfix 类有什么作用?

CSS 中的星号属性是什么意思?

background-position-x (background-position-y) 是标准的 W3C CSS 属性吗?

如何参加滚动事件?