重叠的背景图像

发布于 2024-09-05 22:10:51 字数 523 浏览 2 评论 0 原文

我有一个带有使用 css 属性background-image 的背景图像的表格。在表中，我有一些使用 的图像。图像表位于背景图像上方。我希望背景图像像文本一样覆盖图像。这可能吗？

代码示例：

<style>
#content { background-image:url("background-image.jpg"); background-repeat:repeat-y} 
</style>

<table id="content">
<tr>
  <td>Some text.....text.....text
    Image: <img src="quadrado.jpg" />
  </td>
</tr>
</table>

原文

I have a table with a background image using css property background-image. In table I have some images using the <img. Images <img table are above the background image. I would like the background image overwrite the images <img as with the text. Is that possible?

Code Example:

<style>
#content { background-image:url("background-image.jpg"); background-repeat:repeat-y} 
</style>

<table id="content">
<tr>
  <td>Some text.....text.....text
    Image: <img src="quadrado.jpg" />
  </td>
</tr>
</table>

分享到QQ

分享到微博

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

发布评论

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

两人的回忆 2024-09-12 22:10:51

"I would like to display the two images. The background image 
above the quadrado.jpg ! Like a watermark"

听起来您想要一个叠加层。仅使用 CSS 无法做到这一点。
但您可以通过添加如下样式来接近：

#content
{
    opacity:            0.8;
    -ms-filter:         "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter:             alpha(opacity=80);
}
#content img
{
    opacity:            0.8;
    -ms-filter:         "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter:             alpha(opacity=80);
}

.
要获得更多真正的叠加层，您需要将其编码到 HTML 中或使用 JavaScript 动态添加它。

请查看此页面。它使用 javascript 为具有 OverlayTheBackground 类的块生成叠加层。

还有应该生成叠加层的 jQuery 插件。

~~也许可以发布一张你想要的图片。~~

但是，听起来就像您需要做的就是添加以下样式：

#content img {visibility: hidden;}

"I would like to display the two images. The background image 
above the quadrado.jpg ! Like a watermark"

Sounds like you want an overlay. You can't do that with just CSS.
But you can come close by adding styles like so:

#content
{
    opacity:            0.8;
    -ms-filter:         "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter:             alpha(opacity=80);
}
#content img
{
    opacity:            0.8;
    -ms-filter:         "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter:             alpha(opacity=80);
}

.
For more of a true overlay, you'd need to code it into your HTML or use javascript to add it on the fly.

Take a look at this page. It uses javascript to generate overlays for blocks with the class OverlayTheBackground.

There are also jQuery plugins that are supposed to generate overlays.

~~Perhaps post a picture of what you want.~~

But, it sounds like all you need to do is add this style:

#content img {visibility: hidden;}

回复收藏 0 原文