相対位置を使用した後、背景クリップが機能しない

[ad_1]

background-clip:text に問題がある相対位置の後。相対位置を削除した後、完璧に機能し、使用する必要があります

助けて助けて… ええ
これは私のコードです:-

だから、これが`HTML`の私のコードです

<pre lang="HTML">
<pre>
<h3 class="colormanager">
    
        <div class="internaltext">X</div>
        <div class="internaltext">X</div>
        <div class="internaltext">X</div>
        <div class="internaltext">X</div>
        <div class="internaltext">X</div>
        <div class="internaltext">X</div>
        <div class="internaltext">X</div>
        <div class="internaltext">X</div>
        <div class="internaltext">X</div>
        <div class="internaltext">X</div>
        <div class="internaltext">X</div>
    
</h3>

アニメーションの目的で、`position: relative` を使用する必要があります (FireFox では動作しますが、Google Chrome や Safari では動作しません)。

「CSS」は次のとおりです。

<pre lang="CSS">
.internaltext{
    position: relative;
}

.colormanager {
    font-family:, Verdana, Arial, Helvetica, sans-serif;
    font-weight: 600;
    position: relative;
    top: 0;
    white-space: none;
    margin-top: 15px;
    color:transparent;
    background: -webkit-linear-gradient(left, #fff, rgb(231, 221, 221), #fff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0;
    display: flex;
    flex-direction: row;
    font-size: 15px;
    padding-left: 20px
}

私が試したこと：

internaltext で次のことを試しました。

結果以外のすべてで継承を使用することは、私が望んでいたものではありませんでした

<pre lang="CSS">
color:transparent;
background: inherit;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;

興味深い答えが見つからなかったので、ここで質問します。

解決策 1

あなたはこのようなことをしようとしています: https://cssgradient.io/blog/css-gradient-text/[^]

アップデート

あなたが何を期待しているのか不明なので、私が見たものを説明します：

※文字は暗い背景でのみ見えます。
※以下は白文字です。

CSS

background: -webkit-linear-gradient(left, #fff, rgb(231, 221, 221), #fff);

私が使用する場合 background 上記のリンクから、青の背景に白から灰色/銀のグラデーションが表示されます。

CSS

background: -webkit-linear-gradient(#eee, #333);

ここに私のテストHTMLがあります:

HTML

<main>
    <h3 class="colormanager">
        <div class="internaltext">X</div>
        <div class="internaltext">X</div>
        <div class="internaltext">X</div>
        <div class="internaltext">X</div>
        <div class="internaltext">X</div>
        <div class="internaltext">X</div>
        <div class="internaltext">X</div>
        <div class="internaltext">X</div>
        <div class="internaltext">X</div>
        <div class="internaltext">X</div>
        <div class="internaltext">X</div>
    </h3>
</main>

そしてCSS：

CSS

main {
    background-color: blue;
}

.colormanager {
    position: relative;

    display: flex;
    flex-direction: row;

    font-family: arial, Verdana, Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 600;
    white-space: none;

    //background: -webkit-linear-gradient(left, #fff, rgb(231, 221, 221), #fff);
    background: -webkit-linear-gradient(#eee, #333);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

このテーマに関する別の記事を次に示します。 CSSでグラデーションテキストを作成する方法[^]

[ad_2]

Source link