css正片叠底

作者：空白篇pia~ 发布日期:2026-07-20 浏览:43

/* CSS正片叠底（Multiply）效果示例 */

/* 使用背景颜色和线性渐变来演示正片叠底效果 */
div {
  width: 300px;
  height: 200px;
  background: url('image.jpg') no-repeat, linear-gradient(45deg, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5));
  background-blend-mode: multiply; /* 使用正片叠底混合模式 */
}

/* 解释说明：
- `background-blend-mode: multiply;`：将背景图像和背景渐变进行正片叠底混合。
- 正片叠底模式会将两个图层的颜色值相乘，结果颜色通常比原始颜色更暗。
- 这种效果常用于创建深色叠加或增强对比度的效果。
*/

上一篇：style type=test/css

下一篇：css首字母大写