前提・実現したいこと
css
1background:linear-gradient(to right, #ff8177 0%, #b12a5b 100%);
css
1background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, #rgba(255,255,255,.5) 100%);
両方同じ要素に使いたいです。
色の付いたグラデーションを、下にいくほど薄くしたいのですが、画像を使わずCSSのみで可能でしょうか?
html
1<div class="box"> 2 <div class="box2"> 3 省略 4 </div> 5</div>
css
1.box{ 2 background:linear-gradient(to right, #ff8177 0%, #b12a5b 100%); 3 width:100%; 4 padding:50px 0; 5} 6.box2{ 7 background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, #rgba(255,255,255,.5) 100%); 8}
こうしてみましたが、paddingのせいか、box2の中身の部分だけしかできませんでした。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。