ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS3 背景グラデーションの透明度を使用して、さまざまな色の背景グラデーションを設定する_html/css_WEB-ITnose

CSS3 背景グラデーションの透明度を使用して、さまざまな色の背景グラデーションを設定する_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:20:182503ブラウズ

透明度を追加するには、rgba() 関数を使用してカラー ノードを定義します。 rgba() 関数の最後のパラメータは 0 から 1 までの値で、色の透明度を定義します。0 は完全に透明、1 は完全に不透明を意味します。 rgba() の後のパーセンテージは位置を示します。

具体的なコード:

background: -webkit-linear-gradient(top, rgba(255,255,255,0.4)0%, rgba(255,255,255,0.2)75%, rgba(255,255,255,0)98%);/* Safari、Chrome */background: -o-linear-gradient(bottom, rgba(255,255,255,0.4)0%, rgba(255,255,255,0.2)75%, rgba(255,255,255,0)98%);/* Opera */background: -moz-linear-gradient(bottom, rgba(255,255,255,0.4)0%, rgba(255,255,255,0.2)75%, rgba(255,255,255,0)98%);/* Firefox */background: linear-gradient(to bottom, rgba(255,255,255,0.4)0%, rgba(255,255,255,0.2)75%, rgba(255,255,255,0)98%); /* 标准的语法(必须放在最后) */

注: Internet Explorer 9 以前のバージョンはグラデーションをサポートしていません。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。