css 渐变 黑 透明黑

要实现CSS渐变效果，从上到下有黑色、透明和黑色三个颜色点的渐变，可以使用linear-gradient函数。具体的CSS代码如下所示：

<style>
    .bg-gradient {
        background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 33.33%, rgba(0, 0, 0, 1) 33.33%, rgba(0, 0, 0, 1) 100%);
        /* 其他样式属性 */
    }
</style>

在这段代码中，我们使用linear-gradient函数设置了渐变的方向为从上到下（to bottom），并设置了三个颜色点。

1. 第一个颜色点是完全不透明的黑色，位置为0%。
2. 第二个颜色点是半透明的灰色，使用rgba()函数来设置。其中前三个参数是灰色的RGB值，最后一个参数是透明度，这里设置为0.5，表示半透明。位置为33.33%，表示从顶部开始到1/3的位置是半透明的灰色。
3. 第三个颜色点是完全不透明的黑色，位置也为33.33%。表示从顶部开始到1/3的位置是半透明的灰色，从1/3的位置到底部是黑色的。
4. 第四个颜色点是完全不透明的黑色，位置为100%。表示从1/3的位置到底部是黑色的。

这样就可以实现从上到下三分之一是半透明灰色，渐变到三分之二是黑色的效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [css实现透明渐变特效的示例代码](https://download.csdn.net/download/weixin_38708361/13970986)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [css渐变色半透明半遮挡，动态控制高度线性渐变效果](https://blog.csdn.net/Cool_so_cool/article/details/130982834)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]