background-clip ne fonctionne pas.

Eléphanteau du PHP | 36 Messages

27 oct. 2012, 12:36

Bonjour,

Je travailles à partir de google chrome. Je me demande pourquoi background-clip ne marche pas. Je travailles aussi avec IE9. Mais, la bordure encadre seulement le texte.
<html>
<head>
<title>Arrière-plan</title>
<link rel="stylesheet" type="text/css" href="background-clip.css">
<style type="text/css">
body
{
 background-color:#FF0000;
 border:5px dotted #000000;
 background-clip:content-box;
}
</style>
</head>
<body>
<p>Un <b>atome</b> 1 est la plus petite partie d'un <u>corps simple</u> pouvant se combiner <u>chimiquement</u> avec une autre. La théorie <u>atomiste</u>, qui soutient l'idée d'une matière composée de « grains » indivisibles (contre l'idée d'une matière indéfiniment sécable), est connue depuis l'<u>Antiquité</u>, et fut notamment défendue par <u>Leucippe</u> et son disciple <u>Démocrite</u>, philosophes de la <u>Grèce antique</u>. Elle fut disputée jusqu'à la fin du <u>xixe siècle</u> et n'a plus été remise en cause depuis lors.<br><br> C'est ainsi sur les propriétés des atomes que reposent toutes les <u>sciences des matériaux</u> modernes.</p>
<p>Un atome est constitué d'un <u>noyau</u> concentrant plus de 99,9 % de sa masse, autour duquel se distribuent des <u>électrons</u> pour former un nuage 40 000 fois plus étendu que le noyau lui-même. Ce dernier est constitué de <u>protons</u>, chargés positivement, et de <u>neutrons</u>, électriquement neutres ; <u>l'hydrogène</u> fait exception, car le noyau de son <u>isotope</u> 1H, appelé <u><i>protium</i></u>, ne contient aucun neutron. Les électrons occupent des <u>orbitales atomiques</u> en interaction avec le noyau via <u>la force électromagnétique</u>, tandis que les <u>nucléons</u> sont maintenus ensemble au sein du noyau par la <u>liaison nucléaire</u>, qui est une manifestation de l'<u>interaction nucléaire forte</u>. Le <u>nuage électronique</u> est stratifié en niveaux d'énergie quantifiés autour du noyau définissant des <u>couches</u> et des <u>sous-couches électroniques</u> ; les <u>nucléons</u> se répartissent également en <u>couches nucléaires</u>, bien qu'un modèle approché assez commode popularise la <u>structure nucléaire</u> d'après le <u>modèle de la goutte liquide</u>.</p>
<p>Plusieurs atomes peuvent établir des <u>liaisons chimiques</u> entre eux grâce à leurs <u>électrons</u>, et, d'une manière générale, les propriétés chimiques des atomes sont déterminées par leur <u>configuration électronique</u>, laquelle découle du nombre de <u>protons</u> de leur <u>noyau</u>. Ce nombre, appelé <u>numéro atomique</u>, définit un <u>élément chimique</u>.</p>
</body>
</html>

Mammouth du PHP | 790 Messages

27 oct. 2012, 14:36

salut,
fait voir le contenu de background-clip.css
Les fautes de grammaire et d'orthographe contenu dans mes postes sont sous copyright, vous pouvez les utiliser pour un usage personnelle mais vous ne devrez en aucun cas les utiliser a des fins commercial sans une autorisation écrite de ma part.

Mammouth du PHP | 790 Messages

27 oct. 2012, 14:41

oups, tu ne parle probablement pas de celui la...
La propriété CSS background-clip spécifie si la couleur ou l'image d'arrière-plan d'un élément doit s'étendre sous sa bordure.
S'il n'y a pas d'image d'arrière-plan, la propriété n'a d'effet que si la bordure a des zones transparentes (à cause de border-style) ou est partiellement opaque. Sinon, la bordure cache la surface en-dessous.

plus d'infos: http://www.alsacreations.com/tuto/lire/ ... -clip.html
Les fautes de grammaire et d'orthographe contenu dans mes postes sont sous copyright, vous pouvez les utiliser pour un usage personnelle mais vous ne devrez en aucun cas les utiliser a des fins commercial sans une autorisation écrite de ma part.

Eléphanteau du PHP | 36 Messages

27 oct. 2012, 15:30

J'ai mit un background-image puis sa n'a pas d'effet. Surment un probleme de navigateur.

Eléphanteau du PHP | 36 Messages

28 oct. 2012, 03:57

Bonjour,

J'ai cherché partout dans le net pour savoir l'erreur à mon script. Je vous le jure wellah. J'ai vérifié le navigateur, le code tout tout tout. Je ne sais pas pourquoi sa ne marche pas. Je travaille avec ie9.
<!doctype html>
<html>
<head>
<title>Arrière-plan</title>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<link rel="stylesheet" type="text/css" href="background-clip.css">
<style type="text/css">
body
{
 background-image:url('http://images.mmosite.com/photo/2009/04/23/latalew457tdntYW36c.jpg');
 border:5px dotted #000000;
 background-clip:padding-box;
}
</style>
</head>
<body>
<p>Un <b>atome</b> 1 est la plus petite partie d'un <u>corps simple</u> pouvant se combiner <u>chimiquement</u> avec une autre. La théorie <u>atomiste</u>, qui soutient l'idée d'une matière composée de « grains » indivisibles (contre l'idée d'une matière indéfiniment sécable), est connue depuis l'<u>Antiquité</u>, et fut notamment défendue par <u>Leucippe</u> et son disciple <u>Démocrite</u>, philosophes de la <u>Grèce antique</u>. Elle fut disputée jusqu'à la fin du <u>xixe siècle</u> et n'a plus été remise en cause depuis lors.<br><br> C'est ainsi sur les propriétés des atomes que reposent toutes les <u>sciences des matériaux</u> modernes.</p>
<p>Un atome est constitué d'un <u>noyau</u> concentrant plus de 99,9 % de sa masse, autour duquel se distribuent des <u>électrons</u> pour former un nuage 40 000 fois plus étendu que le noyau lui-même. Ce dernier est constitué de <u>protons</u>, chargés positivement, et de <u>neutrons</u>, électriquement neutres ; <u>l'hydrogène</u> fait exception, car le noyau de son <u>isotope</u> 1H, appelé <u><i>protium</i></u>, ne contient aucun neutron. Les électrons occupent des <u>orbitales atomiques</u> en interaction avec le noyau via <u>la force électromagnétique</u>, tandis que les <u>nucléons</u> sont maintenus ensemble au sein du noyau par la <u>liaison nucléaire</u>, qui est une manifestation de l'<u>interaction nucléaire forte</u>. Le <u>nuage électronique</u> est stratifié en niveaux d'énergie quantifiés autour du noyau définissant des <u>couches</u> et des <u>sous-couches électroniques</u> ; les <u>nucléons</u> se répartissent également en <u>couches nucléaires</u>, bien qu'un modèle approché assez commode popularise la <u>structure nucléaire</u> d'après le <u>modèle de la goutte liquide</u>.</p>
<p>Plusieurs atomes peuvent établir des <u>liaisons chimiques</u> entre eux grâce à leurs <u>électrons</u>, et, d'une manière générale, les propriétés chimiques des atomes sont déterminées par leur <u>configuration électronique</u>, laquelle découle du nombre de <u>protons</u> de leur <u>noyau</u>. Ce nombre, appelé <u>numéro atomique</u>, définit un <u>élément chimique</u>.</p>
</body>
</html>

Mammouth du PHP | 790 Messages

28 oct. 2012, 11:10

comment est affiché ton image ?
Les fautes de grammaire et d'orthographe contenu dans mes postes sont sous copyright, vous pouvez les utiliser pour un usage personnelle mais vous ne devrez en aucun cas les utiliser a des fins commercial sans une autorisation écrite de ma part.

Eléphanteau du PHP | 36 Messages

28 oct. 2012, 12:47

Je comprend pas la question

Eléphanteau du PHP | 36 Messages

29 oct. 2012, 22:35

background-clip marche-t-il sur body?

Ten
Invité n'ayant pas de compte PHPfrance

01 nov. 2012, 10:00

J'ai l'impression que tu suis plus ce forum que celui d'alsa donc je me permet de reposter la solution ici-même :

Lis un peu ça. J'avoue ne pas tout comprendre mais ça semble impliquer une relation entre les éléments html et body, dans le cas ou html n'aurait pas de background.

Adjoint aux explications présentes sur Alsacréations que tu as surement déjà lues, je me suis amusé à tester autre chose - voilà le résultat.

En réalité donc, background-clip fonctionne sur le body à condition qu'un background non transparent soit appliqué à html. Tu peux ruser en utilisant une valeur rgba très faible, ou une couleur de ton choix, mais ça semble être une condition sine qua non.

Voilà ! C'est une maigre consolation mais j'espère que ça pourra t'aider à atteindre ton but !

Bonne continuation.

Eléphanteau du PHP | 36 Messages

03 nov. 2012, 15:09

Vous pouvez me faire une exemple qui fonctionne? je suis plus visuel.