[英]Transparent CSS gradient around circular image background
您可以使用border-radius
radial-gradient
函数在css中创建径向渐变,并使元素以border-radius
舍入。
.transparent-gradient { width: 300px; height: 300px; border-radius: 50%; display: inline-block; position: relative; overflow: hidden; } .transparent-gradient img { min-width: 100%; min-height: 100%; vertical-align: middle; } .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; }
<div class="transparent-gradient"> <img src="https://images.unsplash.com/photo-1530279281203-4c60af01ee58?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=02b66d237286bcb2a071ed6c1e72adf3&auto=format&fit=crop&w=1950&q=80" width="400"> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.