そして伝説になりたかった

働きたくない男の雑記・備忘録

テキストの背景に下半分だけ色をつけるハイライト表示

投稿日:2019/1/8 最終更新日:2019/11/19 閲覧数:1836

カテゴリー: WEB>

以下の記事で以前紹介しました↓

cssのみで背景にグラデーションを適用する(応用編あり)

タグ:#css#グラデージョン#スタイルシート#もっと早く知りたかった#背景色

linear-gradientですが、他にも便利な使い方があります。

そう、これです。早速コードにいきましょう。


    <style>
    .highlight01 {
        background: linear-gradient( rgba(255, 242, 160, 0)60%, rgba(255, 242, 160, 1)60%, rgba(255, 242, 160, 1));
        padding: 4px;
    }
    </style>

読めばまぁ分かると思いますが、spanで囲んだ範囲の上60%を透明に、下40%を黄色くしています。

汎用クラスとしてか用意しておけばどこにでも使えて便利ですね。ただし多用は厳禁です。ださいので。

よく見られている記事

おすすめの記事

管理人について

高専へ入学するがプログラミングが嫌いという理由で機械科を選択。その後勉強が嫌いという理由で高専退学。グラフィックデザインの仕事ができると騙され20歳からweb業界へ就職するも、大嫌いなプログラミングをさせられ続ける毎日が待っていた。未だにプログラミング地獄から脱出できないでいる。

その他管理人についてはこちら
プロフィールとか


コメントを残す