HTML/CSS/jQuery：背景图像不透明度

发布于 2024-10-08 17:20:42 字数 416 浏览 7 评论 0原文

假设我有一个 div，并且该 div 应该有一个背景图像：url(foobar.png)。不过，foobar.png 的不透明度也应设置为 40%，以便背景图像是半透明的。我该怎么做？

如果没有 JavaScript 就不可能实现这一点，是否有我可以参考的示例脚本？像这样的东西吗？

jQuery.fn.fadedBgImg = function(url, opacity) {

    // Create block element that fills `this` element

    // Set z-index of said element to lowest

    // Set opacity of said element to 40%

    // Insert said element into parent
}

原文

Let's say I have a div, and that div should have a background-image:url(foobar.png). Also, however, foobar.png's opacity should be set to 40% so that the background image is translucent. How can I do this?

If this is not possible without JavaScript, is there an example script I can refer to? Something like this?

jQuery.fn.fadedBgImg = function(url, opacity) {

    // Create block element that fills `this` element

    // Set z-index of said element to lowest

    // Set opacity of said element to 40%

    // Insert said element into parent
}

分享到QQ

分享到微博

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

发布评论

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

跨年 2024-10-15 17:20:42

使用 CSS 设置不透明度：

.translucent {
    opacity: 0.4;
    filter: alpha(opacity = 40); /* For IE */
}

编辑：

是的，opacity 设置整个元素的不透明度，而不仅仅是内容。要解决这个问题，您可以让内容覆盖背景并将它们包装在一个公共父级中：

<div id="container">
  <div id="background" class="translucent"></div>
  <div id="content"></div>
</div>

并使用 CSS，如下所示：

#container {
    position: relative;
    width: 200px;
    height: 200px;
}

#background, #content {
    position: absolute;
    top: 0;
    left: 0;
}

Use CSS to set the opacity:

.translucent {
    opacity: 0.4;
    filter: alpha(opacity = 40); /* For IE */
}

Edit:

Yes, opacity sets the opacity for the entire element, not just the content. To work around this, you can have the content overlay the background and wrap them both in a common parent:

<div id="container">
  <div id="background" class="translucent"></div>
  <div id="content"></div>
</div>

And use CSS like this:

#container {
    position: relative;
    width: 200px;
    height: 200px;
}

#background, #content {
    position: absolute;
    top: 0;
    left: 0;
}

回复收藏 0 原文

萌逼全场 2024-10-15 17:20:42

我发现这是最简单的方法：在图形编辑器中，将 foobar.png 的透明度设置为 60% 并将其保存为 24 位 png 文件。如果您需要将此文档提供给 IE6 并且不想使用 png 修复，那么这不是一个解决方案。

否则，就跨浏览器支持而言，处理网络浏览器中的不透明度是一件很烦人的事情，而且据我记得，处理子元素变得透明是一个典型的问题。

不幸的是，我没有任何脚本可以方便地解决这个问题。

编辑：我看到你进行了编辑，我可以告诉你，你并不像我最初预期的那样不知道自己在做什么。如果我的建议看起来有点初级，请不要生气，哈哈。

回复收藏 0 原文

离笑几人歌 2024-10-15 17:20:42

试试这个.. HTML 结构的小变化.. 不使用背景图像，而是使用普通图像并将其向后设置为低不透明度。

.my_div{width:300px;height:300px;position:relative;}
.my_div div.back_image{display:block; position:absolute; width: 100%; height:100%;top:0px ; left:0px;opacity:0.8;z-index:1;}
.my_div div.back_image img {width: 100%; height:100%;}
.my_div div.front_text{position:absolute; width: 100%; height:100%;top:0px ; left:0px;opacity:1;z-index:99;padding:10px;color:#ffffff;box-sizing: border-box;}

<div class="my_div">
  <div class="back_image"><img src="https://newevolutiondesigns.com/images/freebies/black-wallpaper-10.jpg"></div>
  <div class="front_text">
  <h2>Testing Title</h2>
  <p>Lorem Ipsum content testing.
  This is Prakash Rao </p>
    </div>
</div>

Try this .. Little changes in the HTML structure .. and instead of using background image use normal image and set it backwards with low opacity.

.my_div{width:300px;height:300px;position:relative;}
.my_div div.back_image{display:block; position:absolute; width: 100%; height:100%;top:0px ; left:0px;opacity:0.8;z-index:1;}
.my_div div.back_image img {width: 100%; height:100%;}
.my_div div.front_text{position:absolute; width: 100%; height:100%;top:0px ; left:0px;opacity:1;z-index:99;padding:10px;color:#ffffff;box-sizing: border-box;}

<div class="my_div">
  <div class="back_image"><img src="https://newevolutiondesigns.com/images/freebies/black-wallpaper-10.jpg"></div>
  <div class="front_text">
  <h2>Testing Title</h2>
  <p>Lorem Ipsum content testing.
  This is Prakash Rao </p>
    </div>
</div>

回复收藏 0 原文

烟柳画桥 2024-10-15 17:20:42

尝试使用 css 更改不透明度：

opacity:0.4

Try changing opacity with css:

opacity:0.4

回复收藏 0 原文

樱花落人离去 2024-10-15 17:20:42

虽然不直接支持设置背景图像不透明度，但您可以指定多个背景图像值< /a>，使用距离观看者最近的第一个进行渲染。

因此，如果您由于某种奇怪的原因无法在图像编辑器中简单地编辑图像的不透明度并提供修改后的图像，您可以尝试以下操作：

semitransparent = "images/white50.png"; //a 1x1 pixel image, white at 50% transparency.
myElement.style.backgroundImage = "url('"+semitransparent+"'), url('"+backgroundImage+"')";

此示例假设您通常在白色页面背景上渲染；如果您尝试用其他颜色部分“渗透”来模拟半透明，您可能希望更改半透明图像的颜色。

While there's no direct support for setting background-image opacity, you can specify multiple background-image values, which are rendered with the first one closest to the viewer.

Thus, if you are for some strange reason unable to simply edit the opacity of the image in an image editor and serve up the modified image, you could try something like:

semitransparent = "images/white50.png"; //a 1x1 pixel image, white at 50% transparency.
myElement.style.backgroundImage = "url('"+semitransparent+"'), url('"+backgroundImage+"')";

This example assumes you're generally rendering over a white page background; you may wish to change the color of the semitransparent image if you're trying to simulate semitransparency with some other color partially bleeding "through."

回复收藏 0 原文

悲喜皆因你 2024-10-15 17:20:42

 In IE, a !DOCTYPE must be added for the :hover selector to work on other elements than the a element.



img { opacity: 0.4; filter: alpha(opacity=40); //forIE* and earlier

img:hover { opacity: 1.0; filter: alpha(opacity=100); //forIE* and earlier

<img src="klematis.jpg" width="150" height="113" alt="klematis">

<img src="klematis2.jpg" width="150" height="113" alt="klematis">

 In IE, a !DOCTYPE must be added for the :hover selector to work on other elements than the a element.



img { opacity: 0.4; filter: alpha(opacity=40); //forIE* and earlier

img:hover { opacity: 1.0; filter: alpha(opacity=100); //forIE* and earlier

<img src="klematis.jpg" width="150" height="113" alt="klematis">

<img src="klematis2.jpg" width="150" height="113" alt="klematis">

回复收藏 0 原文

~没有更多了~