CSS透明徑向漸變問題

Question

我是CSS漸變的新手，並試圖掌握它，我試圖應用白色透明的CSS漸變來用背景圖像圍繞圓形div的邊界。 不幸的是，我得到的效果不是所需要的，我該如何制作它，以使圖像看起來不那么被漸變所遮蓋，並且漸變不那么寬，我想讓它僅影響圖像的邊界圖像，例如距外環深約30像素。

我的代碼：

 .transparent-gradient::after { content: ""; background-image: radial-gradient(ellipse at center, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .transparent-gradient{ width:300px; height:300px; margin:20px 0px; align-self:center;position:relative; overflow:hidden; background-color:red;border-radius:50%; background-size:cover; background-position:center; background-image:url('https://images.unsplash.com/photo-1530279281203-4c60af01ee58?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=02b66d237286bcb2a071ed6c1e72adf3&auto=format&fit=crop&w=1950&q=80'); } 

 <div class="transparent-gradient" style=""></div> 

Answer 1

 .transparent-gradient::after { content: ""; background: radial-gradient(ellipse at center, rgba(255,255,255,0) 40%,rgba(255,255,255,.9) 100%); width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .transparent-gradient{ width:300px; height:300px; margin:20px 0px; align-self:center; position:relative; overflow:hidden; background-color:red; border-radius:50%; background-size:cover; background-position:center; background-image:url('https://images.unsplash.com/photo-1530279281203-4c60af01ee58?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=02b66d237286bcb2a071ed6c1e72adf3&auto=format&fit=crop&w=1950&q=80'); } 

 <div class="transparent-gradient" style=""></div> 

使用rgba(255,255,255,0) 40% ， 40%指定“ 大小 ”。 使用rgba(255,255,255,.9) 100%的.9可使白色變硬（不透明/來自rgb A的 alpha值）。 1是完全白色.5是具有50%不透明度的white 。