css中的多个类值

时间:2014-08-23 07:49:06

标签: css css3

我的代码是这样的:

<div class="multiplicity one">
    <div class="content">
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

    </div>
</div>

<div class="multiplicity two">
    <div class="content">
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    </div>
</div>

<div class="multiplicity three">
    <div class="content">
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    </div>
</div>

在我的每个多样性类中,我给出了三个不同的背景图像。我想停止每三个类的背景重复(多重性1,多重性2,多重性三)并编写css代码,如

.multiplicity {
    background-repeat: no-repeat
}

这种语法不正确吗? 这是行不通的。我已在Firefox最新版本中测试过。

1 个答案:

答案 0 :(得分:0)

以下是您的演示

<强> FIDDLE DEMO

.multiplicity {
   background-repeat:no-repeat;
}
.one {
    background-image:url(http://i57.tinypic.com/b4erh2.jpg);
}
.two {
    background-image:url(http://i59.tinypic.com/2lkfhuw.jpg);
}
.three {
    background-image:url(http://i57.tinypic.com/2lkflhd.jpg);
}

重复

的演示

<强> FIDDLE DEMO

.multiplicity {
   background-repeat:repeat-x;
}
.one {
    background-image:url(http://i57.tinypic.com/b4erh2.jpg);
}
.two {
    background-image:url(http://i59.tinypic.com/2lkfhuw.jpg);
}
.three {
    background-image:url(http://i57.tinypic.com/2lkflhd.jpg);
}