8
votes

Comment étirer l'image d'arrière-plan d'une cellule de table avec CSS?

Comment puis-je étirer l'image d'arrière-plan d'une cellule de table avec CSS? Je l'ai googlé sans résultats.

Lorsque vous définissez une image d'arrière-plan d'une cellule et que la taille d'arrière-plan est plus petite que la cellule, elle sera répétée.

Comment puis-je forcer ce contexte à étirer la cellule de la table entière à la place?


1 commentaires

La réponse acceptée à la question n'est plus correcte - tous les principaux navigateurs actuels soutiennent à travers CSS maintenant


3 Réponses :


4
votes

Vous ne pouvez pas étirer une image d'arrière-plan.

Si vous souhaitez étirer une image, vous devez la mettre dans une balise img . Vous pouvez utiliser un positionnement absolu pour mettre du contenu en haut de l'image.


3 commentaires

Mais j'ai fait ce fil pour tables / position absolue pas ok pour l'image de fond des tables / toute autre idée?


@LOSTLORD: Non, vous ne pouvez tout simplement pas étirer une image d'arrière-plan, sauf si vous voulez attendre jusqu'à ce que les navigateurs compatibles CSS 3 soient beaucoup plus courants.


Il y a aussi des bibliothèques javascript qui font ce que c'est décrit sur cette réponse :)



11
votes

Il est possible de étirer une image d'arrière-plan à l'aide du Taille de fond Code> Propriété CSS .

Exemples: P>

body { background-size: 100% auto } /* Stretches image to full horiz. width */
body { background-size: 50% 50% } /* Stretches image to half of available
width and height - WARNING: aspect ratio not maintained */

body { background-size: cover } /* Ensures that image covers full area */
body { background-size: contain } /* Ensures that image is completely visible */
  • c'est-à-dire depuis 9.0 li>
  • chrome depuis 3,0 li>
  • Firefox depuis 4,0 li>
  • Opera depuis 10.0 LI>
  • Safari depuis 4,1 li> ul> p>


9 commentaires

La taille de l'arrière-plan est très très limitée / toute autre idée?


@Lostlord n'est pas vraiment, pas sans solution de contournement de jQuery compliquée. Qu'avez-vous besoin de faire?


Le lien ne fonctionne plus. Soin de le réparer, s'il vous plaît?


@ Goonlight vous êtes limité! ;-) Désolé. Votre commentaire est vieux. Maintenant, le soutien est plutôt bon et la taille de l'arrière-plan est un économiseur de vie.


@Armellarcier Il y a beaucoup d'utilisateurs Internet avec de vieux navigateurs ... Même en 2016 ... Savez-vous pourquoi? parce que je (moi-même) avez encore de Windows XP 3. avec ses navigateurs ... J'ai ... je n'aime pas améliorer ... Je pense que les fenêtres 7 et 8 et ... ne sont pas bonnes ... Mon opinion Un logiciel est génial au début ... mais après la mise à niveau ... Ils vont ajouter des codes supplémentaires à eux que je n'aime pas ... Par exemple: Vérifiez le Bloc-notes dans Windows XP et vérifiez-le dans la fenêtre 7 ... Si vous êtes professionnel et un programmeur ... vous saurez pourquoi je n'ai pas mis à niveau ...


@Mahdijazini Tout véritable surtout surtout si votre application / site Web est expédiée dans le monde entier. En plus de cela, si votre programmeur professionnel sur XP et que vous utilisez un bloc-notes par choix, vous devez aimer la souffrance?


@Armellarcier :)) J'ai Notepad ++ ... En réalité, le bloc-notes était un exemple de décrire les programmes mis à niveau, ajoutez généralement des options inutiles. Ici, Photoshop 7 peut résoudre tous mes problèmes. Pourquoi devrais-je le mettre à niveau? J'aime les vieilles sandwichs: d Easy et rapide à manger ...;)


@MAHDIJAZINI Je suis la même philosophie avec le logiciel Apple et je suis taquiné tout le temps, alors je sentais que je devrais donner ça le dos;)


@Armellarcier Aujourd'hui, je me suis connecté dans l'un de mes blogs et obtenez un rapport. C'est pour 2016. Vous pouvez facilement voir IE7 en haut après la Firefox, vous pouvez également voir à savoir 5 et 6. 91 Visite pour Firefox et 59 visites pour IE7 et 6 visites pour IE6 et 5 visites à IE6 et 5 visites pour IE5 s3.img7.ir/w6c1l.png



3
votes

c'est possible.

REMARQUE: Ceci utilise CSS3 et ne sera pas pris en charge par des navigateurs inférieurs.

Si vous définissez votre cellule avec ce style, il devrait résoudre ce style. ton problème. Il permettra également des tables pliées aussi parce que vous utilisez%. xxx


0 commentaires