Halbtransparentes Bild Grenz

StackOverflow https://stackoverflow.com/questions/642130

  •  22-07-2019
  •  | 
  •  

Frage

würde ich das Bild wie in die Behältern div.imgborder bluten und ich würde die Blutung mag (wie ein undurchsichtiger Glaseffekt) halbdurchlässig werden. Gibt es eine Möglichkeit, dies über CSS zu erreichen oder vielleicht ein Bild mit einiger Hintergrund-Opazität auf dem div.imgborder Einstellung? 

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN'
        'http://www.w3.org/TR/html4/strict.dtd'>
<html>
<head>
<title></title>

<meta name='keyword' content=''>
<meta name='description' content=''>

<link rel='stylesheet' href='reset.css'>

<style type='text/css'>
    body {
      background-color: #ccc;   
    }

    div#container {
      width: 960px;
      margin-left: auto; 
      margin-right: auto;
      margin-top: 50px;
    }

    img#myimg {
      overflow: visible;
    }

    div.imgborder {
      background-color: #222;
      opacity: 0.9;
      width: 160px;
      height: 160px;
      padding: 10px;
    }


</style>

</head>
<body>
    <div id='container'>

        <div class='imgborder' align='center'>
            <img src='bar.jpg' alt='' width='160' height='160' id='myimg' />
        </div>

    </div>
</body>
</html>
War es hilfreich?

Lösung

Sie können eine PNG-Datei mit dem halbtransparenten Effekt erstellen Sie möchten und fügen Sie diese als Hintergrund. Alle modernen Browser wird dies machen richtig und erstellen Sie den gewünschten Effekt.

Andere Tipps

Gecko und Webkit Unterstützung Einstellung rgba () als border-color-Eigenschaft, so dass Sie möglicherweise einstellen könnten: 

border-color: rgba(255,255,255,0.42);

.. und eine gemeinsame Grenze haben, die halb-transparent ist.

, um die Blutung zu erreichen, jedoch werden Sie wahrscheinlich ein transparentes div auf dem Bild zu überlagern müssen und gibt ihm eine Breite und Höhe gleich die Breite und Höhe des Bildes minus der Breite der Grenze. Also, wenn das Bild 200x200 ist, und Sie eine 2px Grenze wollen, werden Sie wahrscheinlich die div 196x196 machen müssen, da das Box-Modell schreibt vor, dass die Rahmenbreite auf die Breite / Höhe Dimensionen hinzugefügt wird.

Dies war js & CSS-Lösung, aber erwähnenswert

GLASSBOX-JS

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top