瑕佹贩鍚堜娇鐢╨inear-gradient锛屾偍鍙互浣跨敤澶氫釜鑳屾櫙鍥惧眰鍜岄€忔槑搴︽潵鍒涘缓娣峰悎鏁堟灉銆備互涓嬫槸涓€涓ず渚嬩唬鐮侊細

div {
  width: 200px;
  height: 200px;
  background: linear-gradient(to right, red, yellow), linear-gradient(to bottom, blue, green);
  background-blend-mode: multiply;
}

鍦ㄨ繖涓緥瀛愪腑锛屾垜浠娇鐢ㄤ袱涓嚎鎬ф笎鍙樿儗鏅浘灞傦紝涓€涓粠宸﹀埌鍙崇殑绾㈣壊鍒伴粍鑹茬嚎鎬ф笎鍙樺拰涓€涓粠涓婂埌涓嬬殑钃濊壊鍒扮豢鑹茬嚎鎬ф笎鍙樸€傛垜浠繕浣跨敤浜?code>background-blend-mode: multiply;鏉ュ皢涓や釜鑳屾櫙鍥惧眰娣峰悎鍦ㄤ竴璧凤紝鍒涘缓娣峰悎鏁堟灉銆?/p>

鎮ㄥ彲浠ュ皾璇曚笉鍚岀殑绾挎€ф笎鍙樻柟鍚戙€侀鑹插拰娣峰悎妯″紡鏉ュ垱寤轰笉鍚岀殑娣峰悎鏁堟灉銆傝娉ㄦ剰锛屾贩鍚堟晥鏋滃彲鑳戒細鍙楀埌娴忚鍣ㄦ敮鎸佺殑褰卞搷锛屾煇浜涙贩鍚堟ā寮忓彲鑳戒笉琚墍鏈夋祻瑙堝櫒鏀寔銆?/p>