Ich versuche, die Ränder eines Bildes wie das unter https://stackoverflow.com/a/24953573 gezeigte Bild zu verwischen.

Ich muss dies auf einem Vordergrundbild tun (nicht auf einem in CSS festgelegten), da die img-URL dynamisch geändert wird. Box-Shadow scheint jedoch keine Auswirkung auf ein Vordergrundbild zu haben. Außerdem verwende ich die Bootstrap 4.3 img-fluid -Klasse.

Mit anderen Worten, der Code in dem oben genannten SO-Beitrag funktioniert, aber die Kanten in diesem Bild sind nicht unscharf (der Einfachheit halber CSS-Inline):

<img src="/images/mypic.jpg" 
    class="img-fluid" 
    style="box-shadow: 0 0 5px 5px white inset;">

.img-fluid setzt max-width: 100% und height:auto. Ich habe versucht, diese mit bestimmten Werten zu überschreiben (was ich nicht tun möchte, um ein ansprechendes Bild zu erhalten), aber es hatte auch keine Auswirkung.

0
globalSchmidt 22 Feb. 2020 im 04:22

3 Antworten

Beste Antwort

Sie müssen das img -Tag mit dem div -Element mit dem Klassennamen .img-blur umschließen. Verwenden Sie daher das Pseudoelement :after, um Inhalte nach dem Inhalt eines Elements einzufügen .

.img-blur{
  position: relative;
  display: inline-block;
}
.img-blur:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 10px 10px #ffffff;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container">
  <div class="row" >
    <div class="col-4 my-3">
      <div class="img-blur">
        <img class="img-fluid" src="https://via.placeholder.com/400x400/22ff22">
      </div>
    </div>
    <div class="col-4 my-3">
      <div class="img-blur">
        <img class="img-fluid" src="https://via.placeholder.com/400x400/ffff22">
      </div>
    </div>
    <div class="col-4 my-3">
      <div class="img-blur">
        <img class="img-fluid" src="https://via.placeholder.com/400x400/22ff22">
      </div>
    </div>
  </div>
</div>
1
Raeesh Alam 22 Feb. 2020 im 05:12

Leider funktionieren CSS-Schatten der 'Inset'-Box nicht für img -Tags. Um dies zu umgehen, haben Sie einige Optionen. Sie können beispielsweise das Bild in ein div -Tag einbinden und ein Pseudoelement verwenden, um das box-shadow darauf anzuwenden.

Das Problem hierbei ist, dass das div -Tag standardmäßig ein "Block" -Element ist und somit die gesamte übergeordnete Breite abdeckt. Sie können dies beheben, indem Sie eine display: inline-block - oder eine float: left -Eigenschaft anwenden. Vielleicht ist nicht die beste "Standard-konform", wird aber in diesem Fall funktionieren. Ich füge unten ein Beispiel mit diesem Konzept hinzu:

div {
  position: relative;
  display: inline-block;
}

div:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 5px 5px white inset;
}
<div>
  <img src="https://picsum.photos/200/300" class="img-fluid">
</div>
0
David R. 22 Feb. 2020 im 04:58

Es gibt ein Problem mit Stilbildern mit inset.

Sie haben jedoch zwei Alternativen, um dies zu tun. Sie können diesem Container einen Container mit relativer Position und innerhalb von put img mit der Klasse img-fluid und div mit absoluter Position hinzufügen.

Die zweite Option besteht darin, einen Container mit relativer Position und img innerhalb festzulegen und diesen Container mit der Pseudoklasse ::after zu formatieren.

Wenn Sie das tun, funktioniert es, aber es gibt ein Problem mit dem richtigen Kastenschatten, wenn img kleiner als ein Container ist. Sie können diese Probleme beheben, wenn Sie JS-Code verwenden.

Ich habe ein Beispiel mit jQuery gemacht (weil Sie Bootstrap verwenden und Bootstrap jquery verwendet).

https://codesandbox.io/s/flamboyant-wing-z9lhm

0
Piotr Glejzer 22 Feb. 2020 im 02:49