Maske-element auf hintergrund, Bild mit transparentem overlay-Farbe

Ist Beispiel von, was ich versuche zu erreichen. Körper hat hintergrund Bild. Über das Bild ist die "Deckkraft" der Schicht. Dann bekam ich eine Liste mit Elementen, die im hintergrund soll maskiert werden, so dass Sie vollständig transparent.

Ist es überhaupt möglich mit CSS ?

failed DEMO: link

HTML-Struktur:

<div id="opacity">
    <ul>
        <li>
            <div class="mask">
                <a class="fancybox" rel="group" href="#">
                    <img src="name.png" class="thumb" />
                </a>
            </div>
        </li>
        <li>
            <div class="mask">
                <a class="fancybox" rel="group" href="#">
                    <img src="name.png" class="thumb" />
                </a>
            </div>
        </li>
    </ul>  
</div>

Yep, ist es. Aber alle Kinder, eine transparente Eltern sind auch transparent. Also, Sie haben zu schieben der nicht-transparenten Elementen in es mit position:relative oder position:absolute.
Ich würde den hintergrund mit z-index:1, die frames mit z-index:0 und berechnen Sie die Deckkraft auf die Bilder wie gewünscht durch eine Summe von hintergrund und Rahmen. Oder einfach nur sehen, @Danko.

InformationsquelleAutor 01e5Dk | 2014-09-16

5

Dem Weg ich weiß, Sie können gefälschte es ist die Einstellung, dass Bild auf der mask Container auch hinzufügen der Eigenschaft
```
 background-attachment: fixed;
```
Wie diese:
```
.mask {
   background-image: url(http://justbeecosmetics.com/img/headImage.jpg); 
   background-attachment: fixed;
   background-size: cover;
}
```
Überprüfen Sie Die Aktualisierte Demo

Von W3

Die background-attachment Eigenschaft bestimmt, ob ein Hintergrundbild fixiert ist bezüglich des Viewports oder Schriftrollen zusammen mit den enthaltenden block.

Den default-Wert ist scrolldann, wenn du es auf fixed

Sich der hintergrund nicht scrollt mit dem element.

Verbunden ist, um den viewport.
- Es gibt ein problem. Wenn Sie das Ergebnis-Fenster sehr klein ist, können Sie scroll. Dann sehen Sie das problem. %)P
- du hast Recht ich guees können Sie auch einen Behälter mit den hintergrund nicht an, dass für den Körper .... alles hängt von der Nutzung und Verhalten, das Sie möchten der Container überprüfen Sie das jsfiddle.net/wL59b37L/14
- Interessante Art der Lösung dieses Problems... Aus Neugier, wird es auch eine rationale Erklärung für diese Methode? In meinem Fall ist es genug, Dank der Herr!
- überprüfen Sie das update ... man kann auch spielen mit dieser Eigenschaft zu setzen das genaue Verhalten, das Sie möchten
InformationsquelleAutor DaniP

Wie über die Verwendung von Grenzen mit rgba () - Werte geben Transparenz :

DEMO

CSS :

body {
    background-image: url(http://justbeecosmetics.com/img/headImage.jpg); 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

}

#opacity {
    position: absolute;
    top: 0;left:0;
    width: 100%;height: 100%;
}

ul li {
    list-style-type:none;
    float:left;
    margin:10px;
    position:relative;
}
ul li:after{
    content:'';
    position:absolute;
    top:-9999px;
    left:-9999px;
    width:100%; height:100%;
    border-color: rgba(0,0,0,.5);
    border-left-width: 9999px;
    border-top-width:9999px;
    border-bottom-width:9999px;
    border-right-width:20px;
    border-style:solid;
}
ul li:nth-child(2):after{
    left:0px;
    border-left-width: 0;
    border-top-width:9999px;
    border-bottom-width:9999px;
    border-right-width:9999px;
}
.mask {
    background:transparent;
    padding:50px;
}
.thumb {
    width:80px;height:80px;
}

+1 schöne Lösung auch ... Das problem ist hier, wenn Sie wollen, später fügen Sie weitere Elemente, die Sie benötigen, um alles neu berechnen.

InformationsquelleAutor web-tiki

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.