背景透明，文字清晰？

发布于 2024-09-29 04:11:47 字数 865 浏览 4 评论 0原文

一段时间以来我一直在用头撞这个。对于网站的 CSS 重新设计，我需要一个父级 div 具有背景图像，后跟具有透明背景的 ap 子级，但前景文本需要保持 100% 不透明度。我尝试制作半透明（40％）白色的 1 像素图像，但与背景图像一起使用时它不会显示。我已经证实这与重复关闭无关。

如果我使用专有内容，文本最终也会受到影响，这是行不通的。

该网站需要在两种设计之间切换，因此我无法将文本移动到另一个子元素中。

JQuery 被大量使用，如果这能帮助我那就完美了。

标记：

CSS：

.titles
{
    background-color: #FFF;
    background-image: URL("../images/Vessel_TitleBackground.jpg");
    padding-top: 2px;
    font-weight: bolder;
    text-align: left;
}
.titles p
{
    text-indent: 2%;
    background-color: #FFF;
    filter:alpha(opacity=60); 
    -moz-opacity: 0.6; 
    opacity: 0.6;
    font-size: 1.1em;
    color: #000;
}

HTML：

<div>
    <div class="titles">
        <p>YEY</p>
    </div>
    <div class="contents">YEY
    </div>
</div>

原文

been banging my head against this one for a while. For a CSS redesign of a site I need a parent div to have a background-image followed by a p child with a transparent background, but foreground text needs to remain at 100% opacity. I tried making a 1px image of a semitransparent (40%) white, but it won't show up when used with background-image. I've verified it's not related to repeat being off.

If I go by proprietary stuff the text ends up affected as well, which doesn't work.

The site needs to switch between 2 designs so I can't move the text into another child element.

JQuery is used heavily if that can help me it would be perfect.

Markup:

CSS:

.titles
{
    background-color: #FFF;
    background-image: URL("../images/Vessel_TitleBackground.jpg");
    padding-top: 2px;
    font-weight: bolder;
    text-align: left;
}
.titles p
{
    text-indent: 2%;
    background-color: #FFF;
    filter:alpha(opacity=60); 
    -moz-opacity: 0.6; 
    opacity: 0.6;
    font-size: 1.1em;
    color: #000;
}

HTML:

<div>
    <div class="titles">
        <p>YEY</p>
    </div>
    <div class="contents">YEY
    </div>
</div>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

乜一 2024-10-06 04:11:47

现代浏览器（Firefox、Chrome、Safari、Opera）支持 RGBA：

#container p { background-color:rgba(255,255,255,0.4); }

上述 CSS 规则将在 P 元素上设置 40% 半透明的白色背景。

但IE8及以下不支持此功能（IE9将支持）。因此，您需要一个针对 IE 的解决方法。您可以使用 IE 条件注释为 IE8 及更低版本定义额外的 CSS 规则，这将设置半透明图像...

<!--[if lt IE 9]>
<style>
    #container p { background-image:url(dot.png); }
</style>
<![endif]-->

如果您在使半透明图像工作时遇到困难，这里有一个演示： http://vidasp.net/tinydemos/img-40-percent-transparent.html

顺便说一句，IE6不支持半透明 PNG，因此您必须针对该浏览器使用另一种解决方法。 IE6 中的透明背景 png 图像问题

Modern browsers (Firefox, Chrome, Safari, Opera) support RGBA:

#container p { background-color:rgba(255,255,255,0.4); }

The above CSS rule will set a 40% semitransparent white background on the P element.

However, IE8 and below does not support this (IE9 will have support). Therefore, you need a workaround for IE. You could use IE conditional comments to define a additional CSS rule just for IE8 and below, which would set a semitransparent image...

<!--[if lt IE 9]>
<style>
    #container p { background-image:url(dot.png); }
</style>
<![endif]-->

If you have trouble making the semi transparent image work, here's a demo: http://vidasp.net/tinydemos/img-40-percent-transparent.html

btw, IE6 does not support semi-transparent PNG's so you will have to use another workaround just for that browser. Transparent background png image issue in IE6

回复收藏 0 原文