css3 arrière-plan dynamique, l'url de l'image

Je suis d'essayer d'alléger le poids de mes fichiers CSS, et avez une question. C'est un peu difficile à expliquer, donc, dans une tentative visant à simplifier la question un peu, imaginez ce (fictif) du scénario.

Imaginer, je possède un atelier d'électricité, et vendus TV, d'une radio et d'un lecteur DVD. En outre, je ne vendait que des produits fabriqués par Panasonic, Sony, Samsung et NEC.

Chacun des quatre fabricants ont leur propre image, et chacun des trois éléments électriques a montré l'image avec des cultures différentes, le ratio d'aspect etc. (Point de l'être, je ne peut pas utiliser la même image sur différents produits, juste redimensionnées. Ils sont distincts des images)

Jusqu'à présent, mon css pour mon site web du produit ressemble à ceci

/* TVs */
a.tv.panasonic { background:url('/images/television/panasonic.jpg'); }
a.tv.sony      { background:url('/images/television/sony.jpg'); }
a.tv.samsung   { background:url('/images/television/samsung.jpg'); }
a.tv.nec       { background:url('/images/television/nec.jpg'); }

/* Radios */
a.radio.panasonic { background:url('/images/radio/panasonic.jpg');}
a.radio.sony      { background:url('/images/radio/sony.jpg');}
a.radio.samsung   { background:url('/images/radio/samsung.jpg');}
a.radio.nec       { background:url('/images/radio/nec.jpg');}

/* DVD Players */
a.dvd.panasonic { background:url('/images/dvd/panasonic.jpg');}
a.dvd.sony      { background:url('/images/dvd/sony.jpg');}
a.dvd.samsung   { background:url('/images/dvd/samsung.jpg');}
a.dvd.nec       { background:url('/images/dvd/nec.jpg');}

C'est juste douze styles et n'est pas une grosse affaire, mais en réalité, nous avons environ 12 différents "produits" et 80 "fabricants", qui est vraiment difficile à gérer, surtout en considérant le "fabricant" de l'image va changer fréquemment. En outre, je n'ai pas de serveur côté de la langue à ma disposition.

Donc, ma question est la suivante. Est-il possible de fusionner URL de l'image à partir de deux règles? Par exemple, je peux faire quelque chose comme ce qui suit:

a.tv    { background:url('/images/television'); }
a.radio { background:url('/images/radio'); }
a.dvd   { background:url('/images/dvd); }

a.panasonic { background:url( background + '/panasonic.jpg'); }
a.sony      { background:url( background + '/sony.jpg'); }
a.samsung   { background:url( background + '/samsung.jpg'); }
a.nec       { background:url( background + '/nec.jpg'); }

De cette façon, chaque fois que nous avons un nouveau "fabricant/produit" ou sur l'image pour un fabricant de changements, j'ai seulement besoin de modifier/modifier une ligne

Grâce

Je sais que vous n'avez pas de fonctionnalités côté serveur, mais vous pouvez utiliser du Javascript/jQuery? Ce serait assez simple à faire avec jQuery
Pourquoi ne pas jquery?
En utilisant uniquement CSS pré-processeur, comme SASS. Toutefois, si vous avez beaucoup d'options, faites-vous une faveur et ne pas ajouter des règles à une feuille de style, ajouter le fond de l'image en utilisant une ligne de style, qui va sérieusement alléger vos feuilles de style. Même un préprocesseur va juste faire la syntaxe est plus facile à gérer, le poids final de l' .la feuille de style css ne sera pas différente.
Je ne suis pas sûr que votre produit les images doivent être dans le CSS. Ils sont contenu, et devrait donc être inline HTML ing balises.
J'ai pensé à jQuery, mais sur une lourde page avec beaucoup de liens, il ralentit le chargement de la page considérablement, en particulier dans IE8. @Paulie_D, le "produit/fabricant ğ scénario n'est pas vraiment ma situation. J'ai simplement utilisé l'analogie de simplifier mon exigence. (il m'a fallu trois tentatives pour le détail de ma situation réelle, et finalement, j'ai abandonné!). En fait, les images sont plus sur la marque de l'entreprise que des images de produits. Ils sont subtils de milieux de liens etc. Normalement, je serais d'accord si, les images des produits ne devrait pas être partie de CSS.

OriginalL'auteur Typhoon101 | 2014-03-28

3

Vous besoin de quelque chose comme SASS, MAIS,
si vous n'avez pas de "ko" problème, vous pouvez utiliser smart arrière-plan.

IDÉE:
Chaque manifacturer a son propre fond d'écran. Cette image cointains TOUS les décors pour tous les produits de cette manifacturers.

Chaque produit dispose d'une classe. Chaque classe a une propriété background-position de réglage x pos et y pos de la "intérieur - image".

Donc, fondamentalement, vous aurez:
```
.panasonic {
   background-image: url('myurl_panasonic');
   background-position: 0px 0px;
}

.sony{
   background-image: url('myurl_sony');
   background-position: 0px 0px;
}

.tv {
  background-position: 0px 120px !important;
}

.dvd {
  background-position: 0px -500px !important;
}

.mpplayer {
  background-position: 50px 720px !important;
}
```
et une div qui sera comme ceci:
```
<div class="sony dvd"></div>
```
C'est le truc pour avoir une unique image d'arrière-plan qui remplissent le statut "active" comme "hover" et "focus" qui fonctionne bien, à chaque fois, parce qu'une seule image, il est chargé de sorte que lorsque vous modifiez l'état d'un bouton de client il suffit de changer les coordonnées de départ de l'image sans avoir à charger une autre image. Cependant, si les images de fond sont lourds et encombrants, vous prenez le risque d'avoir un mégaoctet jpg pour charger!

J'aime cette idée. Facile à entretenir, et pur CSS. Merci

OriginalL'auteur MrPk
6

Vous pouvait le contrôler avec jQuery

HTML
```
<a href="#" data-type="radio" data-brand="panasonic" class="brand-image"></a>
```
jQuery
```
$('.brand-image').each(function(){
    var type = $(this).attr('data-type');
    var brand = $(this).attr('data-brand');

    $(this).css('background-image', 'url(images/' + type + '/' + brand + '.jpg)');
});
```
Sur chacune des ancres que vous voulez changer, vous pouvez ajouter une classe pour indiquer à jQuery pour exécuter la fonction d'ancrage. Dans ces ancrages, à l'aide de données type de données et de la marque, vous devez spécifier le type et la marque de cette image. Lorsque la fonction s'exécute, il va appliquer l'image de fond à ce point d'ancrage sur la base des données que vous avez fournies.

OriginalL'auteur robbclarke
0

Je ne suis pas au courant de toute méthode dynamique d'ajouter des valeurs à un code de style purement avec les CSS.

Donc, ma suggestion serait d'utiliser JQuery, jetez un oeil à certaines de ses fonctions:
http://api.jquery.com/css/
http://api.jquery.com/addclass/

OriginalL'auteur theMarceloR

Vous devez vous connecter pour publier un commentaire.