1. 程式人生 > >把圖片亮度降低之後border-radius就不起作用了的解決辦法

把圖片亮度降低之後border-radius就不起作用了的解決辦法

css中給圖片亮度降低之後,border-radius再給圖片新增圓角的話,就不起作用了

如:

<img src="#" />

這個時候,就需要在image標籤外面套一層div,在div上面降低暗度,這樣圓角就有效果了,

如:

<style>
    .container-img{
        -webkit-filter: brightness(0.5);
        filter: brightness(0.5);
    }
    .container-img img{
        border-radius:10px;
    }
</style>
<div class="container-img">
    <img src="" />
</div>