CSS de base limitée de répétition (plusieurs images d'arrière-plan)

Je suis en train de faire un cool, arrière-plan de l'effet (avec transparence alpha et coins arrondis) pour un menu déroulant avec un seul CSS entrée.

J'ai un capuchon de protection (180 x 4 px), un bouchon inférieur (180 x 20 pixels) et une répétition de moyen (180 x 2px).

Voici mon pertinents existants CSS:

background-image: url('images/drop_top.png'), url('images/drop_bottom.png'), url('images/drop_middle.png');
background-position:left top, left bottom, 0px 10px;
background-repeat:no-repeat, no-repeat, repeat-y;

Le problème est que la section du milieu, qui doit être extensible/tilable est de répéter tout le chemin sous le haut et le bas casquettes-tels que mes coins arrondis sont maintenant en place parce qu'ils ont le répéter milieu sous eux.

Est-il un moyen pour éviter les multiples origines de chevauchement??

Merci d'avance!

Si vous êtes en utilisant les multiples origines de propriété, pourquoi ne pas simplement utiliser border-radius?
Je suis à l'aide d'une fantaisie schmancy effet d'ombre sur le bas (pas un css-un)
Je n'ai jamais utilisé, donc je ne sais pas si ça va marcher, mais peut-être background-clip? dev.opera.com/articles/view/css3-border-background-boxshadow/...

OriginalL'auteur Brian Barrus | 2011-11-08

  1. 8

    Arrière-plan d'origine et/ou background-clip devrait faire l'affaire. Juste set top & bas frontières égale à la hauteur de votre pac graphique, puis définissez drop_middle à background-clip:padding-box

    EDIT: Voici une solution complète, mais pour une orientation horizontale:
    http://jsfiddle.net/nGSba/

    #box
{
    display: inline-block;
    margin: 1em;
    padding: 9px;
    border-left:9px solid transparent;
    border-right:9px solid transparent;
    background-image: url(http://s11.postimage.org/ufpdknvjz/left.png), 
          url(http://s11.postimage.org/6ng294tj3/right.png),
          url(http://www.css3.info/wp-content/themes/new_css3/img/main.png);
    background-repeat: no-repeat, no-repeat, repeat-x;
    background-position: left top, right top, left top;
    background-origin: border-box,border-box,padding-box;
    background-clip: border-box,border-box,padding-box;
}

    Ce qui m'a collé a la transparent sur le border-color. L'arrière-plan la volonté de toujours aller sous de la frontière, de sorte que si la frontière est du solide le fond sera toujours invisible.

    C'est ce que j'utilise et de son encore qui se chevauchent: border-top-width:4px; border-bottom-width:19px; background-image: url('images/drop_top.png'), url('images/drop_bottom.png'), url('images/drop_middle.png'); background-position:left top, left bottom, 0px 10px; background-repeat:no-repeat no-repeat, repeat-y; background-clip:border-box, border-box, padding-box;
    Il semble que les deux background-origin ET background-clip doit être réglé pour qu'il fonctionne correctement.

    OriginalL'auteur philipd

  2. 0

    Quel que soit votre élément, c'est que vous êtes d'appliquer les images, essayez de la manière suivante (je vais supposer div pour des raisons d'illustration):

    div {
    background-image: url('images/drop_top.png'), url('images/drop_bottom.png');
    background-position:left top, left bottom;
    background-repeat:no-repeat, no-repeat;
    position: relative;
}

div:after {
    position: absolute;
    top: 10px ; /* whatever your top image height is */
    bottom: 10px; /* whatever your bottom image height is */
    left: 0;
    right: 0;
    z-index: -1;
    background-image: url('images/drop_middle.png');
    background-position: left top;
    background-repeat: repeat-y;
}
    Juste curieux de savoir si ce serait un navigateur croix de solution, compte tenu de IE est un gâchis.
    N'ai pas testé, mais tous les vieux navigateur ne reconnaît pas :after pseudoelement il ne serait pas travailler.

    OriginalL'auteur ScottS