0

私はWordpress用のこのJqueryスライダープラグインを持っています、そしてそれはMalsupによるjqueryサイクルプラグインです。

とにかく、各スライドにキャプションを追加しました。各スライドではっきりと見える色が見つかりません。そこで、Photoshopで半透明（不透明度50％）のpngを5px x5pxで作成しました。現在、私のCSSは次のようになっています。

.homepage-slides p {
background: transparent url('images/title-bg.png') repeat top left;
bottom: 0;
left: 0;
color: #000000;
font-size: 12px;
font-weight: bold;
margin: 0;
padding: 5px;
position: absolute;
text-align: left;
width: 100%;
}

また、pngへの絶対パスを使用してみましたが、うまくいきませんでした。結果は次のとおりです。

風車

ご覧のとおり、下部のキャプションはほとんど読めません。この半透明の黄色い長方形のボックスのように、そのボックスの中に黒いキャプションを入れて、キャプションを読むことができるようにする方法を見つけられたら、すばらしいと思います。これに関するどんな助けも本当にありがたいです！

4

2 に答える 2

2

ジェイソン氏

このHtmlとCssを試してみてください。

    <body>
    <div class="stroke-effect">
        This text should have a stroke in some browsers
    </div>
    </body>

CSS

    body{
    background-color:#000;
    }
    .stroke-effect{
    font-weight:bold;
    color: #000;
    text-shadow:
    -1px -1px 0 #ffffff,
    1px -1px 0 #ffffff,
    -1px 1px 0 #ffffff,
    1px 1px 0 #ffffff;  
    }

これをチェックしてくださいhttp://jsfiddle.net/VqDKp/

幸運を！

于 2013-01-11T13:23:21.607 に答える
1

画像は使用しないことをお勧めします。理由の 1 つは、一部のブラウザーでは背景が透明な png 画像が透明にならないことです (古いブラウザーだけかもしれませんが、それでもわかります)。もう一つの理由。画像は、スクリプトの背景の 100% に配置されません。

個人的には、CSS で作成された背景を使用するのが好きです。これは、ほとんどすべてのブラウザー タイプをカバーするからです。これが私の背景の例です:)

background:rgba(200,200,200,0.5); //50% silver-ish background.

不透明度を使用できます。pただし、要素のコンテンツにも影響を与えるため、お勧めしません。アルファフィルターを使用しても同じことができると思いますが、使用してからしばらく経ちました。

これはあなたのためのさらなる例です:)

background:linear-gradient(top, rgba(0,0,0,0) 0%, rgba(70,70,70,0.5) 30%, rgba(200,200,200,0.5) 100%); 
//from top to bottom 100% transparent black.
//Very dark grey 50% transparent at 30% from the top of the element.
//Silver-ish 100% at the bottom at 50% transparency.

上記の例では、それぞれ Webkit 拡張機能を使用しています :)

これが役立つことを願っています。

于 2013-01-11T13:21:47.933 に答える