如何从我的mondrian表中的一个块中删除背景颜色？

时间：2015-02-05 03:32:20

标签： html css

我有以下代码用HTML生成一个Mondrian表。背景颜色按行组织。如何从我的几个块中删除背景颜色而不从整行中删除颜色？谢谢！ 

<!DOCTYPE html>
<html>
    <head>
        <style>
            div.one {
              padding: 0px;
              border-top: 2px solid black;
              border-right: 2px solid black;
              border-bottom: 2px solid black;
              border-left: 2px solid black;
              position: absolute;
              z-index: 1;
              background-color: blue;
              opacity: 3;
              }
            div.two {
              padding: 0px;
              border-top: 2px solid black;
              border-right: 2px solid black;
              border-bottom: 2px solid black;
              border-left: 2px solid black;
              position: absolute;
              z-index: 1;
              background-color: red;
              opacity: 0.5;
              }
            div.three {
              padding: 0px;
              border-top: 2px solid black;
              border-right: 2px solid black;
              border-bottom: 2px solid black;
              border-left: 2px solid black;
              position: absolute;
              z-index: 3;
              background-color: green;
              opacity: 0.5;
              }

             div.four {
              padding: 0px;
              border-top: 2px solid black;
              border-right: 2px solid black;
              border-bottom: 2px solid black;
              border-left: 2px solid black;
              position: absolute;
              z-index: 1;
              background-color: yellow;
              opacity: 3;
              }
        </style>
    </head>
    <body>

        <div>

        </div>


        <div style="position: relative">

            <img src="http://31.media.tumblr.com/9fac98407bf71455f2c1a7c4981ecb0a/tumblr_mtc4b2NeuM1r18dpzo1_500.jpg" STYLE ="height:250px ; width: 150px;"/>
        <!-- row 1 -->
            <div class="one" style="left: 0px; top: 0px; width: 180px; height: 75px;">
            </div>
             <div class="one" style="Left: 400px; top: 0px; width: 50px; height: 90px;">
            </div>
            <div class="one" style="Left: 454px; top: 0px; width: 180px; height: 90px;">
            </div>
            <div class="one" style="left: 182px; top: 0px; width: 180px; height: 90px;">
            </div>

            <div class="one" style="left: 362px; top: 0px; width: 34px; height: 90px;">
            </div>

            <!-- row 2 -->
            <div class="two" style="left: 0px; top: 77px; width: 180px; height: 80px; ">
            </div>

            <div class="two" style="left: 182px; top: 92px; width: 150px; height: 50px;">
            </div>

            <div class="two" style="left: 334px; top: 92px; width: 300px; height: 50px;">
            </div>

            <!-- row 3 -->
            <div class="three" style="left: 0px; top: 159px; width: 180px; height: 87px;">
            </div>

            <div class="three" style="left: 182px; top: 144px; width: 130px; height: 102px;">
            </div>

            <div class="three" style="left: 312px; top: 144px; width: 350px; height: 102px;">
            </div>

            <!-- row 4 -->
            <div class="four" style="left: 0px; top: 200px; width: 180px; height: 90px;">
            </div>

            <div class="four" style="left: 182px; top: 250px; width: 130px; height: 102px;">
            </div>

            <div class="four" style="left: 312px; top: 250px; width: 350px; height: 102px;">
            </div>

        </div>

    </body>
    </html>

2 个答案:

答案 0 :(得分：0)

您可以将background: transparent;添加到您不希望拥有背景颜色的<div>。

答案 1 :(得分：0)

您可以使用：nth-​​child ie div.one:nth-child(4){background-color: transparent} 

<!DOCTYPE html>
<html>
    <head>
        <style>
            div.one {
              padding: 0px;
              border-top: 2px solid black;
              border-right: 2px solid black;
              border-bottom: 2px solid black;
              border-left: 2px solid black;
              position: absolute;
              z-index: 1;
              background-color: blue;
              opacity: 3;
              }
            
            div.two {
              padding: 0px;
              border-top: 2px solid black;
              border-right: 2px solid black;
              border-bottom: 2px solid black;
              border-left: 2px solid black;
              position: absolute;
              z-index: 1;
              background-color: red;
              opacity: 0.5;
              }
            div.three {
              padding: 0px;
              border-top: 2px solid black;
              border-right: 2px solid black;
              border-bottom: 2px solid black;
              border-left: 2px solid black;
              position: absolute;
              z-index: 3;
              background-color: green;
              opacity: 0.5;
              }

             div.four {
              padding: 0px;
              border-top: 2px solid black;
              border-right: 2px solid black;
              border-bottom: 2px solid black;
              border-left: 2px solid black;
              position: absolute;
              z-index: 1;
              background-color: yellow;
              opacity: 3;
              }
              div.one:nth-child(4){background-color: transparent}
        </style>
    </head>
    <body>

        <div>

        </div>


        <div style="position: relative">

            <img src="http://31.media.tumblr.com/9fac98407bf71455f2c1a7c4981ecb0a/tumblr_mtc4b2NeuM1r18dpzo1_500.jpg" STYLE ="height:250px ; width: 150px;"/>
        <!-- row 1 -->
            <div class="one" style="left: 0px; top: 0px; width: 180px; height: 75px;">
            </div>
             <div class="one" style="Left: 400px; top: 0px; width: 50px; height: 90px;">
            </div>
            <div class="one" style="Left: 454px; top: 0px; width: 180px; height: 90px;">
            </div>
            <div class="one" style="left: 182px; top: 0px; width: 180px; height: 90px;">
            </div>

            <div class="one" style="left: 362px; top: 0px; width: 34px; height: 90px;">
            </div>

            <!-- row 2 -->
            <div class="two" style="left: 0px; top: 77px; width: 180px; height: 80px; ">
            </div>

            <div class="two" style="left: 182px; top: 92px; width: 150px; height: 50px;">
            </div>

            <div class="two" style="left: 334px; top: 92px; width: 300px; height: 50px;">
            </div>

            <!-- row 3 -->
            <div class="three" style="left: 0px; top: 159px; width: 180px; height: 87px;">
            </div>

            <div class="three" style="left: 182px; top: 144px; width: 130px; height: 102px;">
            </div>

            <div class="three" style="left: 312px; top: 144px; width: 350px; height: 102px;">
            </div>

            <!-- row 4 -->
            <div class="four" style="left: 0px; top: 200px; width: 180px; height: 90px;">
            </div>

            <div class="four" style="left: 182px; top: 250px; width: 130px; height: 102px;">
            </div>

            <div class="four" style="left: 312px; top: 250px; width: 350px; height: 102px;">
            </div>

        </div>

    </body>
    </html>

相关问题
最新问题