Maske div mit CSS

Ok also sagen, ich bin mit dem setup Folgen für meine divs:

.background wird ein Bild enthalten.
.overlay haben einen halbtransparenten weißen hintergrund für das overlay
.inner würde effektiv Maske aus einem Rechteck mit der Größe des div? So, dass der hintergrund transparent ist und die quer durch das overlay-div.

<div class="background">
    <div class="overlay">
        <div class="inner">
        </div>
    </div>
</div>

Ist das möglich mit css?

Könnten Sie definieren mask out a rectangle bitte.. Es ist nicht ganz klar, was du meinst..
Könntest du ein screenshot-Beispiel?
So etwas wie das? jsfiddle.net/8hxoh58r
@Jacques Marais fiddle als Ausgangspunkt, ich denke, Sie wollen diese: jsfiddle.net/a8xsmrca ?
danke für den Kommentar yeh deebs, dass ist genau das, was ich immer an!

InformationsquelleAutor PahPow | 2016-07-12

  1. 1

    Sieht aus wie Sie erreichen können, dass das hinzufügen einer dicken Rand mit einigen Deckkraft (Fiddle). Die border-Breite bestimmen die Größe des Rechtecks gewünschte:

    <div class="background">
  <div class="inner">
  </div>
</div>

    und CSS: 

    html, body {
  height: 100%;
  width: 100%;
}
.background {
  width: 100%;
  height: 100%;
  background: url('http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_b.jpg');
}
.inner {
  width: 100%;
  height: 100%;
  border-top: 130px solid rgba(255, 255, 255, 0.5);
  border-bottom: 130px solid rgba(255, 255, 255, 0.5);
  border-left:  100px solid rgba(255, 255, 255, 0.5);
  border-right:  100px solid rgba(255, 255, 255, 0.5);
  box-sizing: border-box;
}

    InformationsquelleAutor deebs

  2. 0

    Kurze Antwort ist - Nein, Sie konnte es nicht clip div, indem es die Kinder.

    Aber Sie können Ihr problem lösen, ohne clipping. So wie ich das verstehe, brauchen Sie nur die weißen Rahmen um die inneren div. Sie können die Verwendung von Rahmen oder box-shadow. Auch Sie können eine solche Grenze mit 4 divs auf jeder Seite

    InformationsquelleAutor Denis Sheremet

  3. 0

    JA, wenn Sie ein PNG-Bild für die Maskierung. Ist es möglich die clip-hintergrund-div mit seinen Kindern. Was würden Sie brauchen, um es zu tun, verwenden Sie ein PNG mit transparenten Bereich in der Mitte oder wo immer Sie wollen.

    InformationsquelleAutor Newbie

Schreibe einen Kommentar