web-dev-qa-db-ja.com

背景画像付きの白から透明のグラデーション

ページの上部の約1/4を覆う白から透明のグラデーションと、ページの残りの部分に見える背景画像を適用する必要があります。

グラデーションからテクスチャ画像へのシームレスなブレンドを実現し、CSS3でこれを実現したいと考えています。

css3gradientcss
26
Craig

ltimate CSS Gradient Generator-ColorZilla.com をお勧めします

それはうまく設計されたツールで、白から透明のプリセットがあります。

css gradient generator

白から透明のグラデーションに対して生成されるCSSコードは次のとおりです。

background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
44
MikeM

グラデーション生成に別のツールを使用することを好みます- EnjoyCSS 。また、背景、影、遷移などのような他のCSS機能を生成することもできます。

enter image description here このツールで生成された白から透明のグラデーション：

background-image: -webkit-linear-gradient(-90deg, rgba(255,255,255,0) 0, rgba(255,255,255,1) 100%);
background-image: -moz-linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(255,255,255,1) 100%);
background-image: linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(255,255,255,1) 100%);
background-position: 50% 50%;
-webkit-background-Origin: padding-box;
background-Origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: auto auto;
background-size: auto auto;
2
Mikhail Shabrikov