Wie mache ich mein Bild im hintergrund transparent in CSS, wenn ich mit dem folgenden code?

Ich versuche, meinem hintergrund Bild leicht transparent. Ich Las einen anderen Artikel hier auf diesem Thema, aber es hat nicht funktioniert als ich es versucht habe. Ich hoffe ich habe nicht zu wenig oder zu viel info.
Hier ist mein HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My Title</title>
<link type="text/css" rel="stylesheet" href="../Stylesheets/stylesheet1.css">
<link type="text/css" rel="stylesheet" href="../Stylesheets/stylesheet2.css">
<link type="text/css" rel="stylesheet" href="../Stylesheets/stylesheet3.css">
</head>

<body>
<div id="container">
    <div id="background" class="translucent"></div>
<div id="content">
    <div id="backgroundIMG">
</div>
</div>

<H1><div align="center">A heading</div></H1>
<p>
<div style="width:890px;height:40px;border:5px dotted Coral;">
CONTENT
</div>

<p>
CONTENT

<div class="index">
<H2>Index</H2>
Home (on now)
<br>
<a href="page2.html">Bored Main Page</a>
<br>
<a href="page3.html">Tables are here!</a>
</div>
</div>

</body>

Hier sind meine stylesheets:

stylesheet1:

html
{
    font-weight: bold;
}

body
{
margin-left:30px;
margin-right: 30px;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}

stylesheet2:

.index
{
line-height: 1.5em;
padding: 1em;
border: DarkGreen solid 5px;
text-align: left;
width: 890px;
}

.bgCyan
{
background-color: cyan;
color: #525252;
}

.bgGreen
{
background-color: LightGreen;
color: DarkBlue;
}

.bgBoredText
{
background: url(../Images/my_image.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

.translucent
{
opacity: 0.4;
filter: alpha(opacity = 40); /* For IE */
}

stylesheet3:

#container
{
position: relative;
width: 200px;
height: 200px;
}

#background, #content
{
position: absolute;
top: 0;
left: 0;
}

#backgroundIMG
{
background-image: url(../Images/my_image.jpg);
}

Danke im Voraus

InformationsquelleAutor code--shitter | 2013-01-22
  1. 2

    Soweit ich weiß, kann CSS nicht verändern, die Deckkraft einer hintergrund Bild. Sie verändern das Bild in ein Bildbearbeitungsprogramm, um es zu verringern, ist die Deckkraft.

    • Die opacity Eigenschaft verändert die Deckkraft des gesamte element, einschließlich hintergrund-Bild. Du hast ganz Recht, dass CSS nicht beeinträchtigen kann die Deckkraft von nur ein hintergrund Bild obwohl.
    • Korrekt - vielleicht ist meine Verwendung des Wortes "Deckkraft" war eine schlechte, denn ich wußte nicht, dass die Eigenschaft "Deckkraft". Nur die Deckkraft des Bildes selbst, das ist das, was es klingt wie der OP wurde nach.
    • oh okay. thx an alle. ich werde es Bearbeiten in gimp
    • oh Nein, nicht eine schlechte Wahl - ich wusste, was Sie meinte. Ich meinte nur, dass CSS kann ändern Sie die Deckkraft eines Hintergrundbildes (durch verändern der Deckkraft der das gesamte element, einschließlich der hintergrund-Bild), aber man kann es nicht ändern die Deckkraft des Hintergrundbildes, ohne den rest des Elements.
    InformationsquelleAutor chipcullen
  2. 1

    Ich hatte die gleiche Frage, und die Antwort gefunden, aus einer Antwort auf eine andere StackOverflow-Frage. Der trick ist zu verwenden :nach der Eigenschaft des body-Elements. link

        body:after {
        content: "";
        background-image:url('http://www.w3schools.com/css/klematis.jpg');
        background-repeat:repeat;
        background-position:center;
        background-attachment:fixed;
        background-size:cover;
        opacity: 0.5;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        position: absolute;
        z-index: -1;
    }
    InformationsquelleAutor Cathy
  3. 0

    Hinzufügen dieser css, um Ihre #backgroundIMG

     -khtml-opacity: 0.5; 
 -moz-opacity: 0.5; 
 -ms-filter:"alpha(opacity=50)";
  filter:alpha(opacity=50);
  opacity: 0.5;

    beachten Sie, dass es gibt einige Schwierigkeiten, wenn Sie Ihre Seite angezeigt wird, mit verschiedenen Browsern. Zum Beispiel: IE8 (und früher) funktioniert nicht mit dem parameter "Deckkraft".

    • ich habe versucht, das hinzufügen, dass der code zu meinem #backgroundIMG aber alle es Tat, war, entfernen Sie mein Bild alle zusammen. sollte ich einfach Bearbeiten Sie die Deckkraft in photoshop oder gimp?
    • Sie brauchen nicht zu photoshop es... der browser sollte in der Lage sein, um machen es perfekt (und Sie nicht kleben .png-format). Versuchen Sie es Schritt für Schritt: starten Sie zuerst mit dem hintergrund Bild, wenn das klappt eine weitere Zeile hinzufügen: "Deckkraft", wenn das nicht etwas ändern, fügen Sie eine weitere Zeile (wie filter:alpha) und so weiter. sehen, wenn das Bild verschwindet wieder, und wo Sie verschwindet. (vielleicht die Deckkraft war zu hoch eingestellt?)
    InformationsquelleAutor Hans Vn
Schreibe einen Kommentar