当前位置: 动力学知识库 > 问答 > 编程问答 >

Conditional striped background with CSS

问题描述:

I have some DIVs that can be any of 5 colours depending on which classes the DIV has set. If it has more than one class set, there's a priority to determine which colour is used. I want to change this, so that we get multiple colours if multiple classes are set.

Now, one part of this is the UI/UX perspective, because stripes can be horrible to look at. If you have any recommendations, I'm all ears -- but that alone won't earn you an acceptance.

The other part is how to pull this off technically. I'd prefer to do this purely in CSS, and I'd prefer the solution to work on the DIV background colour, but exactly how is still open. It's possible to create two-color stripes, and it's possible to create multi-coloured backgrounds, but it's not clear to me how to do this in a dynamic fashion as opposed to the hard-coded examples, and have the ...dynamismityness?... triggered via element classes.

网友答案:

I imagine you could use http://www.colorzilla.com/gradient-editor/ to obtain something like:

.one{
   background:#ff0000;  
 }

.one.two{
   background: -moz-linear-gradient(left, rgba(255,0,0,1) 0%, rgba(255,0,0,1) 50%, rgba(0,255,0,1) 50%, rgba(0,255,0,1) 50%, rgba(0,255,0,1) 100%); /* FF3.6-15 */
   background: -webkit-linear-gradient(left, rgba(255,0,0,1) 0%,rgba(255,0,0,1) 50%,rgba(0,255,0,1) 50%,rgba(0,255,0,1) 50%,rgba(0,255,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(to right, rgba(255,0,0,1) 0%,rgba(255,0,0,1) 50%,rgba(0,255,0,1) 50%,rgba(0,255,0,1) 50%,rgba(0,255,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#00ff00',GradientType=1 ); /* IE6-9*/ 
}

.one.two.three{
   background: rgb(255,0,0); /* Old browsers */
   background: -moz-linear-gradient(left, rgba(255,0,0,1) 0%, rgba(255,0,0,1) 33%, rgba(0,255,0,1) 33%, rgba(0,255,0,1) 33%, rgba(0,255,0,1) 66%, rgba(0,0,255,1) 66%, rgba(0,0,255,1) 66%); /* FF3.6-15 */
   background: -webkit-linear-gradient(left, rgba(255,0,0,1) 0%,rgba(255,0,0,1) 33%,rgba(0,255,0,1) 33%,rgba(0,255,0,1) 33%,rgba(0,255,0,1) 66%,rgba(0,0,255,1) 66%,rgba(0,0,255,1) 66%); /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(to right, rgba(255,0,0,1) 0%,rgba(255,0,0,1) 33%,rgba(0,255,0,1) 33%,rgba(0,255,0,1) 33%,rgba(0,255,0,1) 66%,rgba(0,0,255,1) 66%,rgba(0,0,255,1) 66%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#0000ff',GradientType=1 ); /* IE6-9 */  
} 
网友答案:

You can USE nth-child option there you can specify for 1n, 2n, 3n and so on

.container div {width:100px; color:#ffffff; padding: 5px;}
    .container :nth-child(1n){
        background: #F44336;
    }
    .container :nth-child(2n){
        background: #E91E63;
    }
    .container :nth-child(3n){
        background: #9C27B0;
    }
    .container :nth-child(4n){
        background: #673AB7;
    }
    .container :nth-child(5n){
        background: #009688;
    }
<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>
分享给朋友:
您可能感兴趣的文章:
随机阅读: