-1

cssを使ってdivを下から塗りつぶしたい。私の要件は、半透明の画像が 1 つあることです。この画像を div に入れました。そのdivの色を上ではなく下から塗りつぶしたい。この効果を適用するために以下のコードを試しましたが、成功しませんでした。私のコードを見て、間違いを教えてください。divにインラインCSSを書いています。クロム検査要素を使用して、画像コンテナー 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 に答える