图像反射不应该有影子

我的图像有反射和阴影（通过使用这个CSS）。问题是：阴影应该只在原始图像上...现在原始图像和反射都有阴影...（它也反映了阴影）。图像反射不应该有影子

enter image description here （这不是一个iPhone屏幕截图，它只是我的页面上的图像）

我应该修改？

-webkit-box-reflect: below 2px 
    -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.7, transparent), to(white)); 
    box-shadow: 0px 2px 2px 0px;

THX

埃弗特

PS。只有WebKit是好的，它是专为WebKit的..

来源

2013-04-05 eds1999

我不知道我看到你的问题。当我将反射降低（因此阴影不重叠）时，反射显然没有阴影。 – metadept 2013-04-05 15:04:30

这不能解决您的问题，但请注意，不推荐使用“-webkit-gradient”。你应该使用'-webkit-linear-gradient'和新的渐变语法。 – 2013-04-05 15:04:56

@metadept屏幕截图在问题中添加..而..反射不应该更低... – eds1999 2013-04-05 15:09:44

有两种方法来解决这个问题：

1）第一种是通过环绕另一个DIV的图像，并给予阴影这个div。
这样的：

<div class="shadow"> 
    <div class="box"></div> 
</div>

您可以将阴影右出的.box的，并给予箱反映只有.box的。
像这样（我增加了更多的属性仅作示范）：

.box{ 
    width:100px; 
    height:100px; 
    border-radius:10px; 
    background:url(../your_image.xxx) no-repeat center; 
    -webkit-box-reflect: below 2px 
    /* DEPRECATED -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.7, transparent), to(white))*/ 
    -webkit-linear-gradient(top, transparent 0%,transparent 70% ,white 100%); 
} 
.shadow{ 
    width:100px; 
    border-radius:10px; 
    box-shadow: 0px 2px 2px 0px; 
}

你可以看到一个工作示例here

*注意WebKit的梯度已过时，你应该使用-webkit-线性如matthias建议的梯度.p

2）第二种方法是将-webkit-box-mask-image应用于反射，当然如果要创建.png掩码。

.box{ 
/*...other properties here...*/ 
-webkit-box-reflect: below 2px 
-webkit-mask-box-image: url(mask.png) 75 stretch; 
}

你可以阅读更多关于CSS口罩性能here

来源

2013-04-06 01:41:18 Yenn

完美的作品！非常感谢你做的这些：）！ – eds1999 2013-04-06 09:12:58

图像反射不应该有影子

回答

相关问题