如何在图片上做一个transference layer，减少图像 Angular 落的图像光，而不是图像中心的图像光？我需要如下所示的结果:
我试过下面的代码:
img {
-webkit-filter: blur(5px); /* Chrome, Safari, Opera */
filter: blur(5px);
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}<html>
<body>
<img src="http://zblogged.com/wp-content/uploads/2015/11/17.jpg" alt="Pineapple" width="300" height="300">
</body>
</html>请帮助进行必要的更改以获得所需的输出。
最佳答案
包装 div 上的绝对定位伪元素和 sem-transparent box-shadow 是一种方法。
body {
text-align: center;
}
.wrap {
display: inline-block;
position: relative;
overflow: hidden;
margin: 1em;
}
.wrap::after {
content: '';
position: absolute;
width: 80%;
height: 80%;
top: 10%;
left: 10%;
border-radius: 50%;
box-shadow: 0 0 0 200px rgba(0, 0, 255, 0.35);
z-index: 1;
}
img {
display: block;
}<div class="wrap">
<img src="http://zblogged.com/wp-content/uploads/2015/11/17.jpg" alt="Pineapple" width="300" height="300">
</div>关于html - 如何在图像上制作转移层，减少图像 Angular 落而不是图像中心的图像光，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35405821/