Die EU schreibt vor das alle mit KI generierten Inhalte entsprechend gekennzeichnet werden müssen. Wir haben hier eine schnelle und einfache Lösung per CSS

Wir gehen von einer Struktur ähnlich wie hier aus

<span class="ki-label">
    <img src="/images/beispiel.jpg" alt="Beispielbild">
</span>

Variante 1 - CSS::before

.ki-generated {
    position: relative;
}

/* KI-Label */
.ki-generated::before {
    content: "KI generiert";

    position: absolute;
    left: 10px;
    bottom: 10px;

    padding: 7px 10px;

    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;

    color: #fff;
    background: rgba(0, 0, 0, .72);
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 5px;

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);

    pointer-events: none;
    z-index: 20;
}

Variante 2 - SVG "KI "

.ki-label-small {
    position: relative;
    display: inline-block;
    line-height: 0;
}

.ki-label-small img {
    display: block;
    max-width: 100%;
    height: auto;
}

.ki-label-small::after {
    content: "";
    position: absolute;
    left: 8px;
    bottom: 8px;

    width: 34px;
    height: 24px;

    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='24' viewBox='0 0 34 24'%3E%3Crect width='34' height='24' rx='5' fill='%23000' fill-opacity='.72'/%3E%3Ctext x='17' y='16.5' text-anchor='middle' font-family='Arial,sans-serif' font-size='12' font-weight='700' fill='%23fff'%3EKI%3C/text%3E%3C/svg%3E")
        no-repeat center / contain;

    pointer-events: none;
    z-index: 10;
}

Variante 3 - SVG "KI Generiert"

.ki-label {
    position: relative;
    display: inline-block;
    line-height: 0;
}

.ki-label img {
    display: block;
    max-width: 100%;
    height: auto;
}

.ki-label::after {
    content: "";
    position: absolute;
    left: 10px;
    bottom: 10px;

    width: 110px;
    height: 30px;

    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='30' viewBox='0 0 110 30'%3E%3Crect width='110' height='30' rx='6' fill='%23000000' fill-opacity='.72'/%3E%3Ccircle cx='15' cy='15' r='9' fill='%23ffffff'/%3E%3Ctext x='15' y='18.5' text-anchor='middle' font-family='Arial,sans-serif' font-size='9' font-weight='700' fill='%23000000'%3EKI%3C/text%3E%3Ctext x='30' y='19' font-family='Arial,sans-serif' font-size='11' font-weight='600' fill='%23ffffff'%3EKI generiert%3C/text%3E%3C/svg%3E")
        no-repeat center / contain;

    pointer-events: none;
    z-index: 10;
}