本文目錄導(dǎo)讀：

1. 線性漸變
2. 徑向漸變

CSS實(shí)現(xiàn)圖片漸變效果圖的方法

在CSS中，我們可以使用線性漸變（Linear Gradient）或者徑向漸變（Radial Gradient）來(lái)實(shí)現(xiàn)圖片漸變效果圖。

線性漸變

線性漸變是從一個(gè)顏色到另一個(gè)顏色的平滑過(guò)渡，我們可以使用linear-gradient函數(shù)來(lái)創(chuàng)建一個(gè)線性漸變的背景，我們可以將一張圖片設(shè)置為背景，并使用線性漸變來(lái)添加一些顏色：

body {
  background-image: url('image.jpg');
  background-size: cover;
  linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 255, 0, 0.5)),
    linear-gradient(to bottom, rgba(0, 0, 255, 0.5), rgba(255, 255, 255, 0.5));
}

在這個(gè)例子中，我們創(chuàng)建了一個(gè)從左側(cè)到右側(cè)的紅色到綠色的線性漸變，以及一個(gè)從上方到下方的藍(lán)色到白色的線性漸變。rgba函數(shù)用于設(shè)置顏色的透明度，使得漸變的顏色能夠逐漸過(guò)渡到背景圖片上。

徑向漸變

徑向漸變是從一個(gè)顏色到另一個(gè)顏色的圓形過(guò)渡，我們可以使用radial-gradient函數(shù)來(lái)創(chuàng)建一個(gè)徑向漸變的背景，我們可以將一張圖片設(shè)置為背景，并使用徑向漸變來(lái)添加一些顏色：

body {
  background-image: url('image.jpg');
  background-size: cover;
  radial-gradient(circle, rgba(255, 0, 0, 0.5), rgba(0, 255, 0, 0.5)),
    radial-gradient(circle, rgba(0, 0, 255, 0.5), rgba(255, 255, 255, 0.5));
}

在這個(gè)例子中，我們創(chuàng)建了一個(gè)從中心到邊緣的紅色到綠色的徑向漸變，以及一個(gè)從中心到邊緣的藍(lán)色到白色的徑向漸變。rgba函數(shù)用于設(shè)置顏色的透明度，使得漸變的顏色能夠逐漸過(guò)渡到背景圖片上。

通過(guò)線性漸變和徑向漸變，我們可以實(shí)現(xiàn)圖片漸變效果圖的效果。