CSS opacity in einem Bild

Was ist der beste Weg (wenn überhaupt) zu machen, die in der box transparent, sodass das Bild gesehen werden kann, ohne die Deckkraft (klares Bild) und der rest von der äußeren box undurchsichtig. So weit ist das, was ich Tue:

<style>
#a {
  background-color: black;
  float: left;
} #b {
    opacity : 0.4;
    filter: alpha(opacity=40); 
} #div {
    position: absolute;
    height: 30px;
    width: 30px;
    top: 90px;
    left: 90px;
    border: 1px solid #FFF;
    background: transparent;
}
</style>

<div id="a">
  <div id="b">    
    <img src="http://clagnut.com/images/ithaka.jpg" />
  </div>
</div>
<div id="div"></div>

Irgendwelche Ideen? thx

InformationsquelleAutor | 2009-02-08

7

Die maximale Deckkraft eines Elements ist die Deckkraft von seinem übergeordneten element. Also, wenn div#b " hat eine Deckkraft von 40%, wenn seine Kinder haben 100% Deckkraft in der Art werden Sie auch 40% absolute Deckkraft.

Zu erreichen, was du beschreibst (zumindest was ich glaube, was du beschreibst), eine Möglichkeit könnte sein, dass sowohl die transparente Schutzfolie, und das Bild der Kinder von einem übergeordneten div mit der relativen Positionierung. Sie können absolut-position sowohl von den Kindern, die im inneren des wrapper so, daß das Bild zeigt bis auf die Oberseite der transparenten box.

Bearbeiten: Hier ist der code für den Effekt, den Sie beschreiben. Mein Beispiel hat eine 480 x 320 Bild und einer 30-pixel-Grenze:
```
<style>
    #back {background-image:url(mypicture.jpg);
               width:480px;
               height:320px;
               position:relative;}
    #middle {position:absolute;
                 width:480px;
                 height:320px;
                 background-color:#000;
                 opacity:0.4;
                 filter:alpha(opacity=40);
                 top:0;
                 left:0;}
    #front {position:absolute;
                width:420px; /* 30px border on left & right */
                height:260px; /* 30px border on top & bottom */
                background-image:url(mypicture.jpg);
                background-position:-30px -30px; /* compensate for the border */
                top:30px;
                left:30px;}
</style>

<div id="back">
    <div id="middle">
    </div>
    <div id="front">
    </div>
</div>
```
Machen Sie ihn nicht zu denken! Es war eine tolle Antwort, um mit zu beginnen, aber ich denke, er brauchte Sie ES für ihn TUN, bevor er akzeptieren würde.
Wenn dies Schule ich würde mit Ihnen einverstanden, aber Profis auf der Suche nach Lösungen für spezifische Probleme. Wenn ich mich auf die Suche nach einer Antwort, ich Suche ein code-Beispiel von jemandem, der hat es gelöst. Wenn ich brauche, um zu verstehen, in die Tiefe, später werde ich dann.
Rex M, ich weiß nicht, ich würde sagen, ein Profi würde noch mehr Anreiz, es zu verstehen, da er wahrscheinlich es wieder tun. Code-Beispiele sind eine große Hilfe zum Verständnis, obwohl.

InformationsquelleAutor Rex M
2

Wenn ich Sie richtig verstehe, versuchen Sie es mit nur einem div (D. H. loszuwerden, die äußere mit der ID "a") und ein farbiger Rahmen um ihn herum. Oder konnten Sie Holen Sie mehr Flexibilität, indem Sie "verschönern" eine Grenze mit 4 divs für den linken, rechten, oberen und unteren Kanten und 4 weitere für die Ecken.

Ist es schwierig zu wissen, was Sie bedeuten, ohne eine Beispiel-Seite, oder screenshots von dem, was Sie erwarten und was Sie tatsächlich bekommen.

BEARBEITEN: ich war zu Bearbeiten, in der im Grunde die gleiche Sache Rex M schrieb. Hier ist noch ein (obwohl idealistisch inferior) Weg, es zu tun:
```
<style>
#a {
    float: left;
    position: relative;
}
div.overlay {
    opacity: 0.4;
    background-color: black;
    position: absolute;
}
#t {
    left: 0; top: 0; height: 90px; width: 450px;
}
#b {
    left: 0; top: 120px; height: 218px; width: 450px;
}
#l {
    left: 0; top: 90px; height: 30px; width: 90px;
}
#r {
    left: 120px; top: 90px; height: 30px; width: 330px;
}
</style>
<div id="a">
    <div id="t" class="overlay"></div>
    <div id="b" class="overlay"></div>
    <div id="l" class="overlay"></div>
    <div id="r" class="overlay"></div>
    <img src="http://clagnut.com/images/ithaka.jpg">
</div>
```
Ich denke, was er will, ist eine Grenze, die ist halbtransparent, so dass das Bild teilweise sichtbar darunter.
Auch wenn das, was REX M hat ist mehr "idealistisch" Ihr code ist nützlich, wenn Sie ändern das Bild mit javascript, in dem Fall das snippet ist mehr nützlich.

InformationsquelleAutor David Z
0

Wenn Sie sicherstellen möchten, dass die Bilder eine bestimmte Farbe für den hintergrund, Sie könnten genauso gut kleben Sie einen hintergrund für alle IMG-Elemente in Ihrem stylesheet:
```
div#a img { background: #FFF; }
```
Ohnehin die filter-Eigenschaft in CSS sollten nicht verlassen werden, da es nicht Teil der offiziellen Spezifikationen für CSS 2.1.

Vielleicht habe ich falsch verstanden, die Frage, though. Könnte man anders formulieren oder Bilder von erwarteten Ergebnisse?

gut, ich möchte das ganze Bild einen dunklen Deckkraft, und nur das Feld transparent sein, damit ich sehen kann, die ursprünglichen Farben des Bildes, ohne die Deckkraft der gesamten box.

InformationsquelleAutor Arve Systad
0

Folgen, was Rex M sagte, Sie müssen die Dinge zu verändern, so dass die nicht-transparente Elemente sind nicht Kinder der transparenten Elementen.

Können Sie absolute oder relative Positionierung line up Ihrer "Grenze" mit dem Bild, obwohl dies oft zu Inkonsistenzen zwischen den Browsern.

Die meisten schmerzlose Weise aus der Spitze von meinem Kopf ist, javascript zu verwenden, um die top und left-pixelpositionen des Bildes, und legen Sie die "oben/Links" css-Eigenschaften von der Grenze zu entsprechen (und legen Sie die Größe des Rahmens auf, dass dem Bild).

UPDATE:

Den Fragesteller zeigte ein Beispiel von dem, was er versucht, neu zu erstellen. In dem Beispiel verbunden ist, werden die schattierten Bereiche ("nicht ausgewählt" Bereich) der das Bild entsteht, indem 4 divs.

Oben und unten divs die volle Breite des Bildes, und sind auf einer Höhe, ist die Differenz zwischen dem oberen/unteren Rand der Auswahl-box und dem oberen/unteren Rand des Bildes jeweils.

Seite divs haben in Höhe und Breite so verändert, dass Sie füllen Sie die "Seitenflächen" des Bildes.

Den Größen aktualisiert werden über ein mousemove-Ereignis.

Wieso der downvote?

InformationsquelleAutor TM.

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.