shape-image-threshold

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Some parts of this feature may have varying levels of support.

Die shape-image-threshold CSS Eigenschaft legt den Alphakanal-Schwellenwert fest, der verwendet wird, um die Form zu extrahieren, indem ein Bild als Wert für shape-outside verwendet wird.

Probieren Sie es aus

shape-outside: linear-gradient(
  50deg,
  rgb(77, 26, 103),
  transparent 80%,
  transparent
);
shape-image-threshold: 0.2;

shape-outside: linear-gradient(
  50deg,
  rgb(77, 26, 103),
  transparent 80%,
  transparent
);
shape-image-threshold: 0.4;

shape-outside: linear-gradient(
  50deg,
  rgb(77, 26, 103),
  transparent 80%,
  transparent
);
shape-image-threshold: 0.6;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element"></div>
    We had agreed, my companion and I, that I should call for him at his house,
    after dinner, not later than eleven o’clock. This athletic young Frenchman
    belongs to a small set of Parisian sportsmen, who have taken up “ballooning”
    as a pastime. After having exhausted all the sensations that are to be found
    in ordinary sports, even those of “automobiling” at a breakneck speed, the
    members of the “Aéro Club” now seek in the air, where they indulge in all
    kinds of daring feats, the nerve-racking excitement that they have ceased to
    find on earth.
  </div>
</section>

.example-container {
  text-align: left;
  padding: 20px;
}

#example-element {
  float: left;
  width: 150px;
  height: 150px;
  margin: 20px;
  background-image: linear-gradient(
    50deg,
    rgb(77, 26, 103),
    transparent 80%,
    transparent
  );
}

Alle Pixel, deren Alphakomponente einen höheren Wert als der Schwellenwert hat, werden als Teil der Form betrachtet, um deren Grenzen zu bestimmen. Zum Beispiel bedeutet ein Wert von 0.5, dass die Form alle Pixel einschließt, die mehr als 50% undurchsichtig sind.

Syntax

css
/* <number> value */
shape-image-threshold: 0.7;

/* Global values */
shape-image-threshold: inherit;
shape-image-threshold: initial;
shape-image-threshold: revert;
shape-image-threshold: revert-layer;
shape-image-threshold: unset;

Werte

<alpha-value>

Setzt den Schwellenwert, der verwendet wird, um eine Form aus einem Bild zu extrahieren. Die Form wird durch die Pixel definiert, deren Alphawert höher als der Schwellenwert ist. Werte außerhalb des Bereichs von 0,0 (vollständig transparent) bis 1,0 (vollständig undurchsichtig) werden auf diesen Bereich begrenzt.

Formale Definition

Anfangswert0.0
Anwendbar aufFlusselemente
VererbtNein
Berechneter WertDerselbe wie der angegebene Wert nachdem die <number> auf den Bereich [0.0, 1.0] zugeschnitten wurde.
AnimationstypNummer

Formale Syntax

shape-image-threshold = 
  <opacity-value>  

<opacity-value> = 
  <number>      |
  <percentage>

Beispiele

Text an einem Verlauf ausrichten

Dieses Beispiel erstellt einen <div>-Block mit einem Verlauf als Hintergrundbild. Der Verlauf wird als CSS-Form mit shape-outside festgelegt, sodass Pixel innerhalb des Verlaufs, die mindestens 20% undurchsichtig sind (also die Pixel mit einer Alphakomponente größer als 0,2), als Teil der Form betrachtet werden.

HTML

html
<div id="gradient-shape"></div>

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel at commodi
  voluptates enim, distinctio officia. Saepe optio accusamus doloribus sint
  facilis itaque ab nulla, dolor molestiae assumenda cum sit placeat adipisci,
  libero quae nihil porro debitis laboriosam inventore animi impedit nostrum
  nesciunt quisquam expedita! Dolores consectetur iure atque a mollitia dicta
  repudiandae illum exercitationem aliquam repellendus ipsum porro modi, id nemo
  eligendi, architecto ratione quibusdam iusto nisi soluta? Totam inventore ea
  eum sed velit et eligendi suscipit accusamus iusto dolore, at provident eius
  alias maxime pariatur non deleniti ipsum sequi rem eveniet laboriosam magni
  expedita?
</p>

CSS

css
#gradient-shape {
  width: 150px;
  height: 150px;
  float: left;
  background-image: linear-gradient(30deg, black, transparent 80%, transparent);
  shape-outside: linear-gradient(30deg, black, transparent 80%, transparent);
  shape-image-threshold: 0.2;
}

Die Form wird hier mit background-image unter Verwendung eines linearen Verlaufs anstelle einer Bilddatei festgelegt. Der gleiche Verlauf wird auch als das Bild verwendet, aus dem die Form für die Festlegung des Umflussbereichs mit der shape-outside Eigenschaft abgeleitet wird.

Der 20%ige Opazitätsschwellenwert, um Verlaufspixel als Teil der Form zu behandeln, wird dann mit shape-image-threshold und einem Wert von 0.2 festgelegt.

Ergebnis

Spezifikationen

Specification
CSS Shapes Module Level 1
# shape-image-threshold-property

Browser-Kompatibilität

Siehe auch