Wie haben Sie Elemente mit verschiedenen Hintergrundfarben, aber das Hintergrundbild zeigt überall (aka, ein Wasserzeichen)?

Ich möchte eine HTML-Seite mit einem Wasserzeichen erstellen. Ich stelle das Hintergrundbild auf den Körper. Allerdings habe ich einige Elemente, die das Hintergrundbild nicht durchbluten lassen. Sie definieren ihre eigene Hintergrundfarbe (aber kein Hintergrundbild) und überschreiben die Farbe im Körper. Das hat mich überrascht. Sie haben das Bild nicht überschrieben, nur die Farbe.Wie haben Sie Elemente mit verschiedenen Hintergrundfarben, aber das Hintergrundbild zeigt überall (aka, ein Wasserzeichen)?

Es erscheint sinnvoll, auf einer Seite mit Elementen mit unterschiedlichen Hintergrundfarben ein sichtbares Wasserzeichen zu haben.

Wie bekomme ich den gewünschten Effekt mit Standard-HTML/CSS?

Hier ist ein Beispielcode, der das Problem zeigt. Beachten Sie, dass der weiße Block mein Wasserzeichenbild verdeckt.

<html> 
<head> 
<style type="text/css"> 

.everything 
{ 
    background: url(/images/shield-25.png) blue no-repeat center; 
} 
table, div{ width: 100% } 

#table2 { background-color: white } 
#div2 { background-color: white } 
</style> 
</head> 
<body class="everything"> 

    <table id="table1"><tr><td>Top</td></tr></table> 
    <!-- This table put a big white line over my watermark image. --> 
    <table id="table2"><tr><td>Middle</td></tr></table> 
    <table id="table3"><tr><td>Bottom</td></tr></table> 

    <div id="div1"><tr><td>Top</td></tr></div> 
    <!-- Thought maybe it was a table thing but nope, divs do it too. --> 
    <div id="div2"><tr><td>Middle</td></tr></div> 
    <div id="div3"><tr><td>Bottom</td></tr></div> 

</body> 
</html>

Quelle

2009-02-26 Josh Buedel

Leider für Sie, das ist das gewünschte Verhalten. background-image und background-color sind Untereigenschaften der Eigenschaft background. Da Sie einen Hintergrund auf #table2 und #div2 definiert haben, können Sie sie nicht mehr zum Seitenhintergrund "durch" sehen.

CSS3 können Sie die Deckkraft des Hintergrunds mit dem Ausdruck rgba() festlegen, aber IE unterstützt dies nicht (Firefox 3 and Safari/Webkit do). Um einen rgba get() - ähnlichen Effekt im IE, können Sie eine filter: Regel wie die folgenden verwenden:

#table2 { 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff80,endColorstr=#ffffff80); /* IE proprietary */ 
    background-color: rgba(255, 255, 255, 0.5); /* CSS3 standard */ 
}

Hinweis, wie die startColorstr und endColorstr Parameter einen vierten Wert für Alpha haben.

Quelle

2009-02-26 23:34:14

Es gibt keine Möglichkeit, zu erreichen, was Sie ohne einige clevere HTML/CSS-Hacks tun wollen. Wenn Sie die Hintergrundfarbe eines Elements festlegen, wird verhindert, dass darunter liegende Bilder "durchbluten".

Quelle

2009-02-26 23:33:15

Sie legen das Hintergrundbild für das Körperelement fest. Die divs und der Tisch sind nicht transparent und sie befinden sich vor dem Körperelement, deshalb bedecken sie dein Wasserzeichen.

Wenn Sie das Wasserzeichen auf jedes Element einzeln anwenden möchten, sollten Sie etwas tun:

#table1, #table2, #table3, #div1, #div2, #div3 { 
    background: url(/images/shield-25.png) blue no-repeat center; 
}

oder vielleicht

table, div { 
    background: url(/images/shield-25.png) blue no-repeat center; 
}

Quelle

2009-02-26 23:33:37

Hier können Sie die CSS-Opazität Einstellung suchen in: http://www.quirksmode.org/css/opacity.html

Ich glaube jedoch, (nicht getestet), dass dies auch zu einem beliebigen Text innerhalb der Elemente gelten würde, so dass Sie wahrscheinlich eine zweite Klasse brauchen würde, die festlegen Deckkraft zurück auf 1 für den Text innerhalb der Tabelle usw.

Quelle

2009-02-26 23:44:36

Wie haben Sie Elemente mit verschiedenen Hintergrundfarben, aber das Hintergrundbild zeigt überall (aka, ein Wasserzeichen)?

Antwort

Verwandte Themen