ホームページ > 記事 > ウェブフロントエンド > CSSで不透明度のグラデーションを実現する方法
CSSで不透明度のグラデーションを実現する方法
- 青灯夜游オリジナル
- 2021-07-22 11:59:513348ブラウズ
CSS では、linear-gradient() または Radial-gradient() グラデーション関数を rgba() と組み合わせて使用して、不透明度のグラデーションを設定できます。 Linear-gradient() と Radial-gradient() はグラデーションを設定でき、rgba() は不透明度を制御できます。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
CSS では、rgba() とともに Linear-gradient() または Radial-gradient() グラデーション関数を使用して、不透明度のグラデーションを設定できます。
linear-gradient() 関数とradial-gradient() 関数は、グラデーション効果を設定できます。
-
linear-gradient(): 線形グラデーションを作成します。
radial-gradient(): 放射状グラデーションを作成します
rgba() 関数は赤 (R)、緑 (G)、青を使用します。 (B) 、透明度 (A) をオーバーレイしてさまざまな色を生成します。
コード例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片透明度渐变实例演示</title>
<style>
div{
box-sizing: border-box;
width: 400px;
height: 320px;
font-size: 22px;
padding-top: 100px;
overflow: hidden;
background: no-repeat center top / 100% 100%;
}
.div1 {
background-image: url(img/1.jpg)
}
.div2 {
background-image: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)), url(img/1.jpg)
}
.div3 {
background-image: radial-gradient(rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5),rgba(255, 255, 255, 1)), url(img/1.jpg)
}
</style>
<div class="div1">正常图片</div><br>
<div class="div2">设置线性渐变不透明度效果的图片</div>
<div class="div3">设置径向渐变不透明度效果的图片</div>
</body>
</html>レンダリング:
##説明:
線形グラデーションを作成するには、少なくとも 2 つのカラー ノードを定義する必要があります。カラー ノードは、滑らかな遷移を示したい色です。同時に、開始点と方向（または角度）を設定することもできます。構文は次のとおりです。background-image:linear-gradient(direction, color-stop1, color-stop2, ...);例:
background-image:radial-gradient(shape size at position, start-color, ..., last-color);例:
css ビデオ チュートリアル)
以上がCSSで不透明度のグラデーションを実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSSの書き方を最適化する方法次の記事：CSSの書き方を最適化する方法