文章/答案/技术大牛

发布

社区首页 >问答首页 >用CSS3反射图像的一部分

问用CSS3反射图像的一部分
EN

Stack Overflow用户

提问于 2012-11-23 17:06:31

回答 3查看 5.2K关注 0票数 4

现在我有这样的形象：

我要做的就是让它产生这样的效果：

忘记背景颜色-注意下面部分图像的反射，仍然是相同的颜色，但带有不透明风格的效果。

我尝试过在CSS3中使用不透明和webkit反射，但是没有运气。

我已经把代码去掉了，因为它不起作用，我只剩下原始的图像：

.infrareporting_host_0 {
    background: url("../interface/infrareporting/hostLightGreen.png") no-repeat scroll 0 0 transparent;
}

请记住：

我只想确切地看到所显示的图像--图像的较低部分反射，而不是整个图像反射。
我怎样才能淡出反射图像的不透明度？正常的那个，我想保持原样，但是淡出倒影
一个跨浏览器的解决方案是最好的(atm，我只能用铬)

更新

到目前为止，我的代码只在、chrome、中正确反映，但不透明度没有正常工作。我有这个：

-webkit-box-reflect: below -3px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(white));

image

html

css

webkit

回答 3

Stack Overflow用户

回答已采纳

发布于 2012-11-23 17:15:07

你可以这样做：

html :

<div class="image-block">
   <img src="http://i.stack.imgur.com/mbf9p.png" alt="" />
   <div class="reflection">
      <img src="http://i.stack.imgur.com/mbf9p.png" alt="" />
      <div class="overlay"></div>
   </div>
</div>

css :

.image-block { width:78px; margin:0px 10px; float:left; } 
.reflection { position:relative; } 
.reflection img { 
    -webkit-transform: scaleY(-1); 
       -moz-transform: scaleY(-1); 
        -ms-transform: scaleY(-1); 
         -o-transform: scaleY(-1); 
            transform: scaleY(-1); 
    filter: flipv; opacity:0.20; 
    filter: alpha(opacity='20'); 
} 
.overlay { position:absolute; top:0px; left:0px; width:78px; height:120px; 
    background-image: -moz-linear-gradient( center bottom, rgb(255,255,255) 60%, rgba(255,255,255,0) 75%); 
    background-image:   -o-linear-gradient( rgba(255,255,255,0) 25%, rgb(255,255,255) 40%); 
    background-image:     -webkit-gradient( linear, left bottom, left top, color-stop(0.60, rgb(255,255,255)), color-stop(0.75, rgba(255,255,255,0))); 
filter: progid:DXImageTransform.Microsoft.Gradient( gradientType=0, startColor=0, EndColorStr=#ffffff); 
}

查看这里的现场演示：演示

票数 5

Stack Overflow用户

发布于 2012-11-23 17:12:25

您可以对它使用CSS 3：

.reflect  { 
  -webkit-box-reflect: below 0
  -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white)); 
}

或者像这样的替代品：http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/cross-browser-css-reflections-glows-and-blurs/

票数 1

Stack Overflow用户

发布于 2012-11-23 17:09:30

使用以下代码：

.infrareporting_host_0::before,
.infrareporting_host_0::after
{
  content: "";
  position: absolute;
  top: 100%;
  z-index: -1;
  width: inherit;
  height: inherit;
  display: block;
}
 
.infrareporting_host_0::before
{
  background: inherit;
}

有关更多信息，请参见跨浏览器CSS3反射。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/13533289

复制

相似问题

问用CSS3反射图像的一部分
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用CSS3反射图像的一部分EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用CSS3反射图像的一部分
EN