代码片段 → CSS → 透明背景图片

透明背景图片

Avatar of Chris Coyier
Chris Coyier 于

CSS 中没有 background-opacity 属性，但您可以通过插入一个与后面元素大小完全相同的伪元素并设置常规的不透明度来模拟它。

div {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
}

div::after {
  content: "";
  background: url(image.jpg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

​

嘘！ 创建一个 DigitalOcean 账户并获得 200 美元的免费额度 用于基于云的托管和服务。

评论

  1. fliptheweb
    评论永久链接#

    为什么不使用

    top: 0; bottom: 0; left: 0; right: 0;

    而不是固定宽度和高度？

    回复
    • Sidati
      评论永久链接#

      或者只要位置是绝对的：），只需使用

      width : 100%
height: 100%
    • Rose
      评论永久链接#

      如果你不想让它完全透明怎么办？如何/怎样做到这一点？

    • Dan
      评论永久链接#

      您需要在 div 上设置高度，在本例中，100% 没有参考，因为 div 没有父元素。设置的高度和宽度代表您要为其设置背景的组件。

    • Kevin
      评论永久链接#

      这用于 after。

  2. Robin
    评论永久链接#

    此代码段的浏览器支持情况如何？

    回复
  3. Mars
    评论永久链接#

    我使用
    filter: alpha(Opacity=90);
    opacity: 0.9;

    回复
    • jumplink
      评论永久链接#

      是的，但它使所有内容都变得不透明，而不仅仅是背景。

    • madhu
      评论永久链接#

      那么你的结果是什么？

    • To-mos
      评论永久链接#

      @jumplink：这不是真的，我目前在我的活动网站上使用了 filter: alpha(Opacity=30); opacity: 0.3; 没有任何问题。

    • Dan
      评论永久链接#

      @jumplink 只有当他将其放在父元素上时才会这样，他不是这么建议的。:P

      从浏览器支持的角度来看，我更倾向于使用不透明度而不是滤镜，如果支持正确，我看不出有什么区别，哪一个性能更好？

    • Black Panther
      评论永久链接#

      这是一种 100% 合法的 CSS 技巧，用于仅更改背景图片或背景颜色（在本例中）的不透明度。
      /* 我在这里使用浅灰色作为背景 */
      background-color: rgba(211, 211, 211, 0.3);

      希望这有帮助！

    • tkwanjp
      评论永久链接#

      @Black Panther
      它对背景图片是如何工作的？

  4. Abolfazl beigi
    评论永久链接#

    不错！
    感谢你的技巧，以及评论框里的星星 :D。

    回复
  5. SAM
    评论永久链接#

    有什么技巧可以使其在 IE 7 和 8 中工作？

    回复
    • Eric Sebasta
      评论永久链接#

      升级浏览器；)

    • Henrique
      评论永久链接#

      Mars
      评论永久链接# 2012年8月17日
      我使用
      filter: alpha(Opacity=90);

    • Mike Kelly
      评论永久链接#

      filter: alpha(opacity=40); /* 适用于 IE8 及更早版本 */

  6. Dave
    评论永久链接#

    这非常有效，但我无法选择/点击“顶部”div 中的文本。有人找到解决方法了吗？

    回复
    • Allan
      评论永久链接#

      您可能无法点击内部，因为您有多个 div 在内部。解决方案是在您的 div 中使用类；请参阅下面的代码

      div.transparentBox {
width: 500px;
height: 350px;
display: block;
position: fixed;
top: 30%;
left: 30%;

      }

      div.transparentBox::after {
      content: “”;
      background-color: #ffffff;
      opacity: 0.5;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      position: absolute;
      z-index: -1;
      }

    • petko3000
      评论永久链接#

      您也可以用类似这样的方法来欺骗它

      div * {
  z-index: 0;
}
  7. mary
    评论永久链接#

    如何仅更改背景图片的不透明度？尝试这样做导致除了背景图片之外的所有内容都改变了不透明度。

    回复
  8. Zaf
    评论永久链接#

    不错的技巧，这帮助了我 :)

    回复
  9. lovelive
    评论永久链接#

    我的天啊。这太完美了。我找不到一种方法来应用具有不透明度的背景（它可以完美地适应其父元素并且不会显示在内容之上），并且认为我必须添加一个演示div。这是我今年见过的最棒的技巧之一。由于你的帮助，我期望我的未来网站在视觉上能有更多提升。真的，谢谢，谢谢，谢谢，非常感谢你。

    回复
  10. babyice
    评论永久链接#

    这是使图像背景透明的 css 代码！
    试试看…！ :)

    background: rgb(255, 255, 255) transparent ;
    background: rgba(255, 255, 255, 0.8) ;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF) ;
    -ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF)” ;

    *仅 IE 支持

    回复
  11. Bart
    评论永久链接#

    为什么要使用背景图片不透明度的代码？

    最简单的方法是导出已经具有正确透明度的 .PNG。这样您就不需要编写不透明度代码。并且它将受所有浏览器支持，包括 IE6（如果使用 png 修复）。

    回复
    • ian.pvd
      评论永久链接#

      如何在鼠标悬停时更改不透明度？无需加载新图像或使用精灵。

      或者，
      如何在前端将不透明度设置为某个任意百分比？

    • Jt
      评论永久链接#

      我想主要原因是节省下载时间。特别是半透明的 PNG 非常重。我正在查看一个 10k JPG 和一个 100k PNG。

    • Erica Fisher
      评论永久链接#

      我将用它来使文本在响应式断点处布局发生变化时更易读，从而导致它与背景图片重叠。

  12. Cameron
    评论永久链接#

    当我在 body 元素上执行此技巧时（这样我就可以获得覆盖背景的透明颜色叠加），它仅在初始视口框架中显示 :after 元素。当我向下滚动时，它消失了。对此有什么想法吗？

    此处说明问题的 JSFiddle

    http://jsfiddle.net/ccnokes/sqnKb/

    不过这是一个很酷的技巧。

    回复
    • Cantidio Fontes
      评论永久链接#

      Cameron，您可以将您的位置从“绝对”更改为“固定”。这应该可以解决您的问题。

      此处修复问题的 JSFiddle

      http://jsfiddle.net/sqnKb/20/

    • RjBradlow
      评论永久链接#

      针对 Cameron 难题的解决方案

      Cantidio Fontes 的解决方案非常有效。

      遵循本文档的说明


      父元素省略了 `display: block` 和 `position`，添加它们后，效果也符合预期。

      body {background:#DDD; padding:2em;
    display: block;
    position: relative;
}
  13. Frank
    评论永久链接#

    您好，我该如何降低文本框内背景图片的不透明度？我在用户徽标内有一个用户名文本框，我想降低它的不透明度而不影响文本框。先谢谢了。

    回复
  14. Sneha
    评论永久链接#

    您好，
    除了使用 `background: transparent` 或 `background: none`，我该如何使背景图片透明？

    回复
    • Sly
      评论永久链接#

      尝试使用不同的不透明度值来查看效果。

      div.background
      {
      background:url(tree.gif);
      background-size:100% 100%;
      background-color:#ffffff;
      opacity:.8;
      background-repeat:no-repeat;
      }
      div.box
      {
      background:url(flwr.gif);
      background-size:100% 100%;
      background-color:#ffffff;
      opacity:0.7;
      background-repeat:no-repeat;
      }
      }

      这是一些放置在透明框中的文本。
      这是一些放置在透明框中的文本。
      这是一些放置在透明框中的文本。
      这是一些放置在透明框中的文本。
      这是一些放置在透明框中的文本。

      这是一些放置在透明框中的文本。
      这是一些放置在透明框中的文本。
      这是一些放置在透明框中的文本。
      这是一些放置在透明框中的文本。
      这是一些放置在透明框中的文本。

      这是一些放置在透明框中的文本。
      这是一些放置在透明框中的文本。
      这是一些放置在透明框中的文本。
      这是一些放置在透明框中的文本。
      这是一些放置在透明框中的文本。

      这是一些放置在透明框中的文本。
      这是一些放置在透明框中的文本。
      这是一些放置在透明框中的文本。
      这是一些放置在透明框中的文本。

    • Sly
      评论永久链接#

      div.background
      {
      background:url(img_tree.gif);
      background-size:100% 100%;
      background-color:#ffffff;
      opacity:.8;
      background-repeat:no-repeat;
      }
      div.box
      {
      background:url(img_flwr.gif);
      background-size:100% 100%;
      background-color:#ffffff;
      opacity:0.7;
      background-repeat:no-repeat;
      }
      }

      这是一些放置在透明框中的文本。
      这是一些放置在透明框中的文本。
      这是一些放置在透明框中的文本。
      这是一些放置在透明框中的文本。
      这是一些放置在透明框中的文本。

  15. Mon
    评论永久链接#

    不要使用实际的图片，而是使用 `rgba(255, 255, 255, 0.5)` 代替 - 并结合我同事的一种技巧。效果很好。

    回复
  16. RjBradlow
    评论永久链接#

    我必须将着色器层的 `z-index` 从 -1 更改为 1 才能显示。（Photoshop 和 GIMP 的思维方式）
    页面是深色的，带有白色背景的 div 背景图片和颜色……
    我不想使用对比色来显示实际的图片大小，整个 div 太亮了！
    所以在顶部稍微加一点颜色可以减少眩光，使所有内容都清晰易读。

    感谢您提供这个；我绞尽脑汁试图防止内容掉落。
    抱歉内容有点长，如果其他人也遇到堆叠顺序问题，这是我的示例

    div.titlebox    {
    background-image:url('CovercopyBG2.jpg');
    background-repeat: no-repeat;
    background-position:center; 
    background-color: #fff;
    max-width: 840px;
    margin: 0px auto;
    padding: 20px;
    border: solid 2px #5CACEE;
    border-radius: 20px;
    display: block;
    position: relative;

}
div.titlebox:after  {
    content: "";
    background-color: #000;
    opacity: .1;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 1;
}
    回复
  17. RjBradlow
    评论永久链接#

    我知道这是一个老问题，但对于任何可能想知道答案的人 ivan.pvd 的问题

    .your-class-id    { opacity: .5;  }
.your-class-id:hover    { opacity 1.0;  }

    只需添加 **:hover** 即可在鼠标悬停时更改不透明度或任何样式；颜色、阴影、背景等……

    回复
  18. ashwin
    评论永久链接#

    感谢这个有用的技巧 :)

    回复
  19. nutsack
    评论永久链接#

    试图创造一些有用的东西，但最终却毫无用处，幼稚的行为。

    回复
  20. TJ
    评论永久链接#

    我必须在客户端动态生成背景图片，所以我想通过 jQuery 应用一个类，以便它们在没有复杂实现的情况下看起来是透明的。所以我使用了内嵌的 `box-shadow` 来实现相同的效果（甚至具有很好的晕影效果，但如果你调整扩散足够的话，可以是扁平的透明）

    box-shadow:inset 0 0 600px 75px rgba(0,0,0,1);
    回复
  21. Brad Dalton
    评论永久链接#

    对于宽度不同的归档帖子缩略图怎么办？

    如果希望标题显示在图片上，如何确保具有不透明度的背景颜色始终显示图片的完整宽度，而不是条目标题或条目标题？

    这是我现有的代码，但它无法控制不同尺寸帖子缩略图的背景颜色的宽度

        .archive  .entry-header .entry-title {
        background: rgba(55, 85, 25, 0.3);
    position: absolute;
    display: block;
        text-align: center;
    font-size: 20px;
    padding: 20px 10px;
}
    回复
  22. SomeGuy
    评论永久链接#

    说真的？100kb 的 png 你称之为“重”？也许，与 10kb 的 jpg 相比，但实际上，除非你在一个页面上下载一百万个，否则我们现在拥有相当高速的互联网。除非你涉及到兆字节，否则我不必担心 10kb 与 100kb 图片。如果你真的那么担心文件大小，请使用颜色而不是图片。在我看来，这有点小题大做，但无论如何。

    回复
  23. Jt
    评论永久链接#

    Some guy，你的评论简直就是业余的表现。不在乎 90 Kbps？对于我们正在讨论的图片大小来说，这绝对是巨大的。把它乘以网站上数百张可能的图片，再乘以如果你有任何真正的观看量，你就会把带宽扔进厕所。还有一些人使用 56k，以及大量的人使用 EDGE 或 3G 连接。仅仅因为你随时都能使用高速互联网并不意味着其他人也能，而且你的带宽也不是免费的。像你这样的开发者让我恶心。你一点都不在乎用户体验，你应该换个行业。

    回复
  24. Go Go Web
    评论永久链接#

    伙计们，非常感谢您提供这段非常方便的代码。无论如何，我已经对其进行了改进，并想回馈大家。

    我遇到了一种情况，我正在处理初始 div 的动态“高度”/“宽度”，因此我无法设置 `:after` 选择器的“高度”/“宽度”（除了使用 JS，但这对我这种懒人来说工作量太大）。
    所以我稍微研究了一下，想出了一个纯 CSS 解决方案，它不关心高度/宽度/填充或边距。

    希望我有所帮助 :)
    http://jsfiddle.net/4CvZv/

    回复
  25. Vinaya Kohli
    评论永久链接#

    好吧，我是 CSS 新手。如果您能回答我的问题，我将不胜感激。

    我很难理解“display”和“position”的不同值。
    每个值有什么区别，以及何时使用哪个值。

    提前感谢

    回复
  26. Savita Sathe
    评论永久链接#

    如何在 WordPress 博客中上传徽标时使用它？

    回复
  27. David John
    评论永久链接#

    太棒了，兄弟。背景图片不透明度的优秀示例……

    谢谢

    回复
  28. ryan
    评论永久链接#

    嗨，大家好，我正在尝试在我的网站上为我的背景图片启用此功能，这是我的代码

    .container{
/*background: linear-gradient(to bottom, yellow, magenta);*/
height: 38rem; /*645px*/
overflow: hidden;
/*background-image: url('');*/
background-size: 100%;
background-repeat: no-repeat;

background-color: #ccc;
background-image: -webkit-linear-gradient(bottom left, rgba(255, 255, 255, 0.2) 25%, rgba(0, 0,           0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, rgba(0, 0, 0, 0)       75%, rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(bottom left, rgba(255, 255, 255, 0.2) 25%, rgba(0, 0, 0, 0)   25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
background-image: linear-gradient(to top right, rgba(255, 255, 255, 0.2) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
}

    .container::after {

      background: url('../img/laback.jpg');
  opacity: 0.5;
  /*top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;*/
  z-index: 0;
  content: ""
}

    问题是当我将其放入 url 中时，它不会显示我的背景图片。它只是显示带有样式化的灰色渐变背景。但我想让它看起来像我的图片具有不透明度。这可行吗？或者我应该直接使用 Photoshop？

    回复
  29. Eric Sebasta
    评论永久链接#

    所有那些想为了 IE8 兼容性而使用 `filter` 的人 - 请记住
    如果你这样做，请使用单独的 IE7-8 CSS 包含文件并将它放在那里，因为 `filter` 会对网站产生巨大的
    内存影响，并且在 IE9+ 上不需要。

    或者……因为它们大约占互联网的 3%……忽略那些拒绝升级浏览器的人，这样你就不会减慢其他 IE 用户的速度。

    回复
  30. Sam Keddy
    评论永久链接#

    在实现这个过程中遇到了一些问题（背景没有显示），结果发现这与 `z-index` 有关，div 在容器的前面，但 `::after` 被放在后面。

    增加 div 的 `z-index` 解决了这个问题。

    回复
  31. Danny
    评论永久链接#

    感谢 Sam 发布。这是一个很棒的技巧，并且一直运行良好，直到我从祖先元素中删除了不透明度，导致 `:after` 背景消失。更改 `:after` 的 `z-index` 没有解决问题，但向 div 本身添加 `z-index:0` 解决了问题。

    回复
  32. silambarasan
    评论永久链接#

    运行良好……

    回复
  33. Webdesign7
    评论永久链接#

    完美运行！无需重新发明轮子！:-) 谢谢

    回复
  34. David Sevilla
    评论永久链接#

    完美运行！谢谢！

    回复
  35. Roland684
    评论永久链接#

    为什么使用 `::after` 伪元素并使用 `z-index` 将其向下移动，而不是使用 `::before` 伪元素？

    我们对 `z-index` 操作越少越好。

    回复
    • Josh Lewis
      评论永久链接#

      这真是太棒了！完全按预期工作，并且使修改背景变得轻而易举。

    • Josh Lewis
      评论永久链接#

      `z-index` 部分实际上非常重要。如果没有指定 `z-index`，覆盖对象可能会使其他内容变得透明。在我的例子中，我正在创建一个 100% 宽度/高度的背景，如果禁用 `z-index`，它会使整个网站通过伪元素应用不透明度。

  36. Stephen
    评论永久链接#

    谁能解释一下 jQuery 中的 `end()`？

    回复
  37. Vitor Hugo Soares
    评论永久链接#

    不错！

    回复
  38. parmod
    评论永久链接#

    我想使我的背景图片透明，但不想使用相对、绝对或固定等定位方式。如果我将不透明度设置为 0 到 1，则我的前景内容也会变得透明。我只想要背景图片透明。

    回复
    • Giovanni
      评论永久链接#

      你好 @parmod 和各位

      这是一个简单的 CSS 技巧，可以使你的背景图片变暗，而无需其他 CSS 代码。

      在包含背景图片的元素中，添加 background-color 和 background-blend-mode 如下所示

      .elementWithBackground {
      background-image: url(image/source);
      background-color: rgba(0,0,0,.4);
      background-blend-mode: darken;
      }

      在 background-color 的不透明度值中，你可以决定背景颜色的不透明度。

      干杯！

    • Giovanni Vivanco
      评论永久链接#

      大家好！

      这是一个简单的 CSS 技巧，可以使你的背景图片变暗，而无需其他 CSS 代码。

      在包含背景图片的元素中，添加 background-color 和 background-blend-mode 如下所示

      .elementWithBackground {
      background-image: url(image/source);
      background-color: rgba(0,0,0,.4);
      background-blend-mode: darken;
      }

      在 background-color 的不透明度值中，你可以决定背景颜色的不透明度。

      混合模式在浏览器中得到了很好的支持，除了 IE
      https://caniuse.cn/#search=background-blend-mode

      干杯！

  39. upyog
    评论永久链接#

    我有一个覆盖在图像上的矩形框，其中包含一些文本和按钮。我希望它们都具有响应性。我使用了 Bootstrap 中的 img-responsive 类。图像变得具有响应性，但覆盖在图像上的框、文本和按钮也应该随着图像高度和宽度的减小而具有响应性。我可以通过媒体查询来实现，但是我必须为每个分辨率编写 10 到 15 个媒体查询来管理框的高度、字体和按钮，以便随着图像高度和宽度的减小而调整。
    https://plnkr.co/edit/NYocGF7vsrx8Vnr3IzSI?p=preview

    回复
  40. rhroyston
    评论永久链接#

    为什么不简单地使用设置了透明度的 .png 图片呢？我想唯一的缺点是文件大小会比 .jpg 略大一些，但简单性似乎比 CSS 技巧更好？…只是说说而已。

    回复
  41. Nikoloz Dumbadze
    评论永久链接#

    使用 rgba 颜色渐变，你可以使任何你想要的东西透明，包括 body 的背景图片
    body{
    background-image:linear-gradient(rgba(250, 250 ,250, .5), rgba(250, 250 ,250, .5)),url(”);
    }

    回复
  42. amcpherson
    评论永久链接#

    我想推荐一个免费的 CSS 纹理和图案资源：https://www.csstextures.com

    回复
  43. Joana
    评论永久链接#

    如何在 CSS 中实现这种效果（带有白色背景的图像透明）？
    https://www.photoshopsupply.com/actions/remove-white-background-photoshop

    回复
    • Geoff Graham
      评论永久链接#

      嗨，Joana！这需要在 Photoshop（或其他编辑器）中编辑照片，根据图像的细节，这可能是一项乏味的任务。你链接到的那个是 Photoshop 动作，试图使这项任务更容易。

      一旦你编辑好了没有白色背景的图像，将其保存为支持透明度的图像文件（.png），然后在你的 CSS 中将其用作背景图片。不幸的是，CSS 无法为你移除白色背景。

  44. Giancarlo
    评论永久链接#

    关于：“没有 CSS 属性 background-opacity，但你可以通过插入一个与之完全相同大小的伪元素并设置常规的不透明度来模拟它”。
    示例是针对 DIV 给出的。
    BODY 是否相同？
    我试过了，但…没有成功！
    谢谢

    回复
  45. Giancarlo
    评论永久链接#

    谢谢，Geoff，我马上就会试试。非常非常友好和乐于助人

    回复
  46. Giancarlo
    评论永久链接#

    它有效了！再次感谢！

    回复
  47. Patrissol
    评论永久链接#

    对于更多背景效果，你可以使用 filter: brightness(70%); 代替不透明度。

    回复
  48. Tofiq
    评论永久链接#

    嗨，通常我不使用 ::after，而是使用线性渐变。你是否知道使用线性渐变而不是 ::after 伪元素的任何缺点？

    background-image: linear-gradient(to right bottom, rgba(255,255,255, 0.3),rgba(255,255,255, 0.3)), url(image.jpg);

    回复
  49. Robert
    评论永久链接#

    嗨，有人知道如何使图像覆盖所有元素吗？

    回复
    • Geoff Graham
      评论永久链接#

      嗨，Robert！你可以使用 background-size: cover; 使背景图片完全填充元素。

  50. Gagas
    评论永久链接#

    我试过这个，但它不可见…我试着调试了一下，发现使用负的 z-index (-1) 会使伪元素（before 或 after）位于祖先元素的背景颜色（如果有）之后，因此只有当所有祖先元素的背景都没有设置（或设置为 transparent）时，这才能起作用。例如，如果我在链中某个地方的 div 背景设置为 #fff，则伪元素将不可见。

    我通过在伪元素上设置非负的 z-index（或不设置它，默认为 0）使其工作，这使得它位于任何内容的前面，阻止任何交互。因此，我通过添加另一个规则来抵消这一点，例如 div > * { z-index: 1; } 来提升所有其他内容。但是请注意，该规则对文本节点不起作用（仅对元素起作用），因此你需要将任何原始文本包装到 <span> 或 <div> 等元素中才能使其提升。

    所以它变成了这样

    div::after {
  ...
  position: absolute;
  z-index: 0;
}
div > * {
  z-index: 1;
}
    回复

发表评论

Your email address will not be published. Required fields are marked *

© 2024 . All rights reserved.