当前位置：首页 > news >正文

css设置让整个盒子的内容渐变透明（非颜色渐变透明）

news 2025/5/11 3:03:08

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>