本文主要是介绍css设置让整个盒子的内容渐变透明（非颜色渐变透明），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
css设置让整个盒子的内容渐变透明（非颜色渐变透明）
- 效果
- 核心css代码
效果
核心css代码
/* 设置蒙版上下左右渐变显示 */
mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%),linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
mask-composite: intersect;
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {padding: 0;margin: 0;}.f-c-c {display: flex;justify-content: center;align-items: center;}.content {width: 100vw;height: 100vh;}.skyblue {width: 500px;height: 500px;background-color: skyblue;/* 设置蒙版上下左右渐变显示 */mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%),linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);mask-composite: intersect;}.pink {width: 200px;height: 200px;background-color: pink;}.pink {width: 200px;height: 200px;background-color: pink;/* 设置蒙版上下左右渐变显示 */mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%),linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);mask-composite: intersect;}.yellow {width: 100px;height: 100px;background-color: yellow;}</style>
</head>
<body><div class="content f-c-c"><div class="skyblue f-c-c"><div class="pink"><div class="yellow"></div></div></div></div>
</body>
</html>
这篇关于css设置让整个盒子的内容渐变透明（非颜色渐变透明）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
