0

我有这个用于 Wordpress 的 Jquery 滑块插件，它只是 Malsup 的 jquery 循环插件。

无论如何，我在每张幻灯片中添加了一个标题。我只是找不到在每张幻灯片中清晰显示的颜色。所以我在 Photoshop 中制作了一个半透明（50% 不透明度）的 png，5px x 5 px。目前，我的 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

我建议不要使用图像。一个原因是具有透明背景的 png 图像在某些浏览器中不具有透明度（我知道它可能只是较旧的浏览器，但仍然如此）。另一个原因。图像不会 100% 定位在脚本中的背景中。

我个人喜欢使用 CSS 制作的背景，因为它们几乎涵盖了所有浏览器类型。这是我给你的背景例子:)

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

你可以使用不透明度。但我不建议这样做，因为它会影响p元素中的内容。我相信使用 alpha 过滤器会做同样的事情，但我已经有一段时间没有使用它们了。

这是给你的另一个例子:)

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 回答