web-dev-qa-db-ja.com

スライダー画像を暗くするにはどうすればよいですか？

WordPressに回転スライダーをインストールしています。目的は、スライドの上にopacity=0.3の暗いオーバーレイを配置することです...絶対位置でoverlay.divを作成しようとしましたが、「次のスライド」、「前のスライド」などのコントロール要素を含むすべてのスライダーをカバーしましたスライド」など。

したがって、このオーバーレイをスライド画像とスライダーコントロールの間に配置する必要があります。画像付きのコードを見つけました

<div class="tp-bgimg defaultimg" data-lazyload="undefined" data-bgfit="cover" data-bgposition="center top" data-bgrepeat="no-repeat" data-lazydone="undefined" src="http://wp-themes/wp-content/uploads/2015/04/slider1.png" data-src="http://wp-themes/wp-content/uploads/2015/04/slider1.png" style="width: 100%; height: 100%; visibility: inherit; opacity: 1; background-image: url(http://wp-themes/wp-content/uploads/2015/04/slider1.png); background-color: rgba(0, 0, 0, 0); background-size: cover; background-position: 50% 0%; background-repeat: no-repeat;"></div>

それから私はこれを書いた

 $('.tp-bgimg').before('<div class="slider-area-overlay"></div>');

何も変わりません。理由はわかりません。

次のステップ：cssを介してそれを実行しましょう。

.tp-bgimg { position: relative; }

.tp-bgimg:before {
    background: rgba(0,0,0,.5);
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    content: "";
}

かっこいいですが、スライド画像は変更なしで表示され、1〜2回のsrecondの後に私のcssスタイルが表示されます。

この問題をどうやって決めるのか本当にわからないので、助けてください。

javascriptjqueryhtmlcsswordpress
7
user3768359

Slider Revolution FAQは、これに対する3つのソリューションを提供します。

  • オプション1）組み込みのオーバーレイを有効にする

    これは、スライダーの外観設定、サイドバーにあります。 「点線のオーバーレイサイズ」オプションを変更することをお勧めします。

    enable dotted overlay option in slider settings

  • オプション2）スライドの「カスタムCSS」に次のCSSブロックのいずれかを追加します

    個人的にグローバルスライダーCSSに追加したので、すべてのスライドに影響しました。

    1. 個々のスライドにキャプションがある場合：

      .rev_slider .slotholder:after {
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;

    /* black overlay with 50% transparency */
    background: rgba(0, 0, 0, 0.5);
}

    2. 個々のスライドにキャプションがない場合：

      .rev_slider:after {
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99;
    pointer-events: none;

    /* black overlay with 50% transparency */
    background: rgba(0, 0, 0, 0.5);
}

  • オプション3）画像編集ソフトウェアを使用します。 Adobe Photoshop、画像に暗いオーバーレイを手動で適用し、暗い画像をスライドの背景として使用します。

    最も簡単な方法は、画像の上にレイヤーを追加し、それを黒くペイントしてから、黒のレイヤーの透明度を約50％に下げることです。

    Applying dark overlay to image in Photoshop

Slider Revolutionが提供するソリューションと手順は、利用可能です here 。

10
moollaza

まず、開始アニメーションが追加の要素を作成するため、.rev_slider .slotholderのスタイル（.tp-bgimgではない）を拡張する必要があります。

次に、スライダーはアニメーション用の画像の複製を作成します。これは、ソース画像のz-indexよりもz-indexが大きくなります。

これを試してみてください、それはうまくいくでしょう。

.rev_slider .slotholder:after, .rev_slider .slotholder .kenburnimg img:after {
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    z-index: 99;
    background: rgba(0,0,0,.5);
}
7
Alexander Goncharov

動作する超簡単な方法を見つけました！

新しい形状を作成します。レイヤーオーバーレイに名前を付けて、一番上にドラッグします。黒に着色します。不透明度を50％に変更します。幅と高さは100％にする必要があります。カバーモードで「ストレッチ」を選択します。ほぼ完了しました。もう1つのステップ。

最後に、[動作]に移動し、[整列]を[スライドベース]に切り替えます。これにより、オーバーレイが100％に拡大されます。

見つかりませんか？このリンクを確認してください。

https://www.themepunch.com/faq/incorrect-position-or-size-for-text-button-or-shape/

手順3までスクロールします。レスポンシブ配置を調整します。

これが簡単だったらいいのですが、そうではありません。設定に含まれている点線のオーバーレイは気に入らない。これが誰かを助けることを願っています。

1
kevllar

Slider Revolutionバージョン6のアップデートを見つけました。これは、新しいバージョンでは機能しなくなったためです。

.rev_slider .slotholder:after,
#rev_slider_2_1 rs-sbg:after
{
    content: '';
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background: rgba(30,30,30,0.5);
}

2番目のエントリは、この特定のスライドショー（＃rev_slider_2_1）に対してそれを行います。

前のソリューションと同等の、すべてのスライドに対してより一般的なアプローチを使用するには、次のようなものを使用できます。

.rev_slider .slotholder:after,
rs-sbg-wrap rs-sbg:after
{
    content: '';
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background: rgba(30,30,30,0.5);
}
0
Dirk Loose

ビデオの場合に備えて、z-indexを追加し、cssクラスを変更します。

.rs-background-video-layer:before {
        width: 100%;
        height: 100%;
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        pointer-events: none;
        z-index:1;
        background: rgba(0, 0, 0, 0.3);
    }
0
Abidemi Kusimo