-1

我想使用css从底部填充div中的颜色。我的要求是我有一个半透明的图像，我把这个图像放在了 div 中。我想从底部而不是顶部填充该 div 的颜色。我试过下面的代码来应用这个效果，但没有成功，所以请查看我的代码并告诉我错误是什么。我在 div 中编写内联 css。我使用 chrome 检查元素增加了图像容器 div 的高度。

<div style="width:128px;height:128px;overflow:hidden;position:relative;margin-left:auto;margin-right:auto;">
 <div style="width:100%;height:0%;bottom:0;background-color:green;">
  <img src="images/test.png" class="footprint_img"/>
     <div>test</div>
  </div>    
</div>
4

2 回答 2

0

您的 div 的高度为零。所以它不会出现。linear-gradient此外，您可以使用CSS3 的属性将div 填充为透明色。

<div class="outerDiv">
    <div class="innerDiv">
        <div>test</div>
    </div>
</div>

CSS 如下所示：您可以从 colorzilla.com/gradient-editor 轻松获取 CSS 代码

.outerDiv {
    width:128px;
    height:128px;
    overflow:hidden;
    position:relative;
    margin-left:auto;
    margin-right:auto;
}
.innerDiv {
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzk0ZDg2MyIgc3RvcC1vcGFjaXR5PSIwLjUiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzk0ZDg2MyIgc3RvcC1vcGFjaXR5PSIwLjUiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-linear-gradient(top,  rgba(148,216,99,0.5) 0%, rgba(148,216,99,0.5) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(148,216,99,0.5)), color-stop(100%,rgba(148,216,99,0.5))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(148,216,99,0.5) 0%,rgba(148,216,99,0.5) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(148,216,99,0.5) 0%,rgba(148,216,99,0.5) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(148,216,99,0.5) 0%,rgba(148,216,99,0.5) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(148,216,99,0.5) 0%,rgba(148,216,99,0.5) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8094d863', endColorstr='#8094d863',GradientType=0 ); /* IE6-8 */
    /* IE6-8 */
    width:100%;
    bottom:0;
}

小提琴在这里

于 2013-07-25T05:30:58.423 回答
-1

删除你的内部div height width bottom

<div style="width:128px;height:128px;overflow:hidden;position:relative;margin-left:auto;margin-right:auto;">
 <div style="background-color:green;">
  <img src="images/test.png" class="footprint_img"/>
     <div>test</div>
  </div>    
</div>

演示

===========================

不要使用习惯于这种方式的内联 css

HTML

<div class="parent">
 <div class="child">
  <img src="images/test.png" class="footprint_img"/>
     <div>test</div>
  </div>    
</div>

CSS

.parent{
    width:128px;
    height:128px;overflow:hidden;
    position:relative;
    margin-left:auto;
    margin-right:auto;
}
.child{background-color:green;}

演示2

于 2013-07-25T05:24:45.653 回答