Wie füge ich Inline-CSS-Code mit Hintergrundbild in HTML-Code hinzu?

Question

Wie füge ich Inline-CSS-Code mit Hintergrundbild in HTML-Code hinzu?

- 0
- 59867 2012-03-19
Ichmöchte Inline-CSS-Code aufeiner Seitemeines Blogs hinzufügen. Dieser CSS-Code ruftein Bild als Hintergrundeines Div auf.

Ist dasmöglich?und wiegeht das?

Ich habe versucht,das Bild als Medienressource hinzuzufügen,und habeeine URL dafürerhalten,aber die Verwendung dieser URL scheintnicht zufunktionieren.

Beispielfür Code,denichin meine HTML-Seiteeinfüge:

<p><a href="http://mysite.com/wp-signup.php" style="width: 90%; font-family: Helvetica, Arial, sans-serif; background: #0e710d url(http://mysite.com/wp-content/uploads/2012/03/image.png) 0 0 repeat-x; font-size: 1.6em; "> Click here »</a></p>
I want to add inline css code inside a page of my blog. This css code calls an image as background of a div.

Is this possible? and how to do that?

I have tried to add the image as a Media resource, and got a URL for it, but using this URL does not seem to work.

Example of code that I paste to my page html:

<p><a href="http://mysite.com/wp-signup.php" style="width: 90%; font-family: Helvetica, Arial, sans-serif; background: #0e710d url(http://mysite.com/wp-content/uploads/2012/03/image.png) 0 0 repeat-x; font-size: 1.6em; "> Click here »</a></p>
css

- Icherkannte,dass das Problem darinbestand,dassichin der Mittemeines Inline-CSS-Codesetwas Platz hatte,wodurch der Codenichtmehrfunktionierte.
  
  I realized the problem was that I had some space in the middle of my inline css code which prevented the code from working.
  - 0
  - 2012-03-20
  - Timothée HENRY

2 Antworten

Stimmen

- 1
- 2012-03-19
Esgibt keinen Grund,warum diese Technikim Allgemeinennichtfunktionieren sollte,obwohl Ihr spezifisches Codebeispielnicht sofunktioniert,wie Sieesmöchten: Siefügen das style-Attributeinem A-Tag hinzu,nichteinem DIV-Tagist das,was du sagst,was dutun willst.Daher sollte das A-Tag wiegezeigtgestaltet sein,nicht das DIV-Tag.

There's no reason this technique shouldn't work in general, although your specific code example won't work the way you say you want: you're adding the style attribute to an A tag, not to a DIV tag, which is what you say you want to do. So the A tag should be styled as shown, not the DIV tag.

Sagive SEO · Accepted Answer · 2012-03-19

3

2012-03-19

Kannst du diesem Linknichteinfacheine Klassegeben?Warum sollten Sie Ihre Vorlagendateienberühren?
Jedenfalls seheich keinen Grund,warum Sie dasnicht können ... das CSS solltefunktionieren ..

Dieeinzige Änderung,dieichbeim Bearbeiteneiner Vorlagendatei vornehmen würde,ist
Verwenden Sie PHP,um die Ordner-URL (wo sich Ihr Bildbefindet) wiefolgt abzurufen:

 <style type="text/css">
.specialLink a {
    width: 90%;
    font-family: Helvetica, Arial, sans-serif;
    background: #0e710d url("<?php get_bloginfo('url'); ?>/wp-content/uploads/2012/03/image.png") repeat-x 0 0;
    font-size: 1.6em;
}
</style>

<p class="specialLink"><a href="http://mysite.com/wp-signup.php">Click here &raquo;</a></p>

Nochmals ... Ichempfehle Ihnen,Ihre style.css zu verwenden,um diese CSS zu laden undnichtin
Vorlagendateien .. wenn Sieesnurfüreine bestimmte Seitebenötigen,sagen Siees ...ich habe
einebessere Lösung dafür.

Hoffe das hilft,Sagive.

cant you just give that link a class? why touch your template files?..
anyhow i see no reason why you can't to that... the css should work..

The only change i would do when editing a template file is
using php to get the folder url (where you image is) like so:

<style type="text/css">
.specialLink a {
    width: 90%;
    font-family: Helvetica, Arial, sans-serif;
    background: #0e710d url("<?php get_bloginfo('url'); ?>/wp-content/uploads/2012/03/image.png") repeat-x 0 0;
    font-size: 1.6em;
}
</style>

<p class="specialLink"><a href="http://mysite.com/wp-signup.php">Click here &raquo;</a></p>

Again... i reccomend you use your style.css to load that css and not in
template files.. if you need it just for a specific page say so... i have
a better solution for that.

Hope this helps, Sagive.

Icherkannte,dass das Problem darinbestand,dassichin der Mittemeines Inline-CSS-Codesetwas Platz hatte,wodurch der Codenichtmehrfunktionierte.

I realized the problem was that I had some space in the middle of my inline css code which prevented the code from working.
- 0
- 2012-03-20
- Timothée HENRY
Ichbin froh,dass du dasgelöst hast.soetwas kanneinen Designer verrücktmachen,wennernacheiner Lösung sucht;)

glad you solved that. that kinda stuff can get a designer crazy while searching for a solution ;)
- 0
- 2012-03-20
- Sagive SEO
Siefordern spätereinen fehlerhaften Bildlink an,indem Sie den Pfad zur Datei verwenden.Es wärebesser,wp_get_attachment_image_src () zu verwenden.

You're asking for a broken image link down the road by using the path to the file. It would work better to use wp_get_attachment_image_src().
- 0
- 2013-06-20
- JPollock