ホームページ > ウェブフロントエンド > CSSチュートリアル > Greasemonkey/Tampermonkey を使用して「banner_url」クラスの CSS スタイルをオーバーライドする方法

Greasemonkey/Tampermonkey を使用して「banner_url」クラスの CSS スタイルをオーバーライドする方法

Mary-Kate Olsen
リリース: 2024-11-03 05:39:30
オリジナル
641 人が閲覧しました

How to Override CSS Styles for the

Greasemonkey/Tampermonkey を使用したクラス CSS の操作

「banner_url」クラスを使用してページ要素の背景画像を変更しようとしています。必要な CSS プロパティが提供されています。

Greasemonkey による CSS カスケードの使用:

GM_addStyle() を使用して CSS ルールをページに挿入します。次のスクリプトをお勧めします:

// ==UserScript==
// @name     _Override banner_url styles
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @grant    GM_addStyle
// @run-at   document-start
// ==/UserScript==

GM_addStyle ( `
    .banner_url {
        background: url('http://www.pxleyes.com/images/contests/kiwis/fullsize/sourceimage.jpg') no-repeat center center fixed !important;
        -webkit-background-size: cover !important;
        -moz-background-size: cover !important;
        -o-background-size: cover !important;
        background-size: cover !important;
    }
` );
ログイン後にコピー

注:

  • ルールに優先順位を付けるには、「! important」フラグを使用します。
  • ドキュメントの開始時にスクリプトを実行して、スタイル変更時の視覚的なちらつきを最小限に抑えます。

代替:

  • Tampermonkey/Violentmonkey: Greasemonkey 4 よりも推奨。
  • Stylus: CSS 操作に特化した拡張機能。

以上がGreasemonkey/Tampermonkey を使用して「banner_url」クラスの CSS スタイルをオーバーライドする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート