时间戳

首页 > 解决方案 > 如何在没有后透明部分的情况下将背景颜色覆盖到背景图像

css - 如何在没有后透明部分的情况下将背景颜色覆盖到背景图像

问题描述

我想 为此效果实现 css 内容：但我不知道如何编写正确的 css 代码或者可能无法实现？ 实际的

<!doctype html>
<html>
<head>
   <meta charset="utf-8"/>
  <link rel="stylesheet" type="text/css" href="result.css" />
   <title>无标题文档&lt;/title>
</head>
<body style="background-color:black;" >
    <div class="_7_cursor_png"></div>
    <div class="_10_cursor_png"></div>
    <div class="board"></div>
    <div class="board2"></div>
</body>
</html>


@keyframes k0 {
0% { opacity:0; }
0.0009999999% { opacity:1; }
99.99998% { opacity:1; }
100% { opacity:0; }
100% { opacity:0; }
}
._7_cursor_png { left:107px;
top:0px;
transform:rotate(0rad) scaleX(1) scaleY(1);
opacity:0.00;
background-color:#FFFF00;
height:240px;
width:240px;
animation:k0 4000001ms linear 0ms forwards;
background-image:url("cursor\.png");
background-blend-mode:multiply;
position:fixed; }
@keyframes k1 {
0% { opacity:0; }
0.0009999999% { opacity:1; }
99.99998% { opacity:1; }
100% { opacity:0; }
100% { opacity:0; }
}
._10_cursor_png { left:427px;
top:240px;
transform:rotate(0rad) scaleX(1) scaleY(1);
opacity:1.00;
background-color:#FFFFFF;
height:240px;
width:240px;
animation:k1 4000001ms linear 0ms forwards;
background-image:url("cursor\.png");
background-blend-mode:multiply;
position:fixed; }
.board { top:480px;
left:0px;
width:3000px;
margin:0px;
padding:0px;
height:3000px;
position:fixed;
background-color:#000000; }
.board2 { left:854px;
top:0px;
margin:0px;
padding:0px;
width:3000px;
height:3000px;
position:fixed;
background-color:#000000; }

我只想更改背景图像颜色但跳过这些透明像素，所以我认为它应该提供 css 属性或我可以使用的东西。

标签： cssbackground-imagebackground-color

解决方案

推荐阅读