文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何使元素的背景图像边缘与主背景图像融合？

问如何使元素的背景图像边缘与主背景图像融合？
EN

Stack Overflow用户
提问于 2021-06-16 02:32:06
回答 3查看 593关注 0票数 0

我遇到了一个问题，就是试图淡出div的背景图像的边缘，这样看起来它就像在混合整个站点的背景图像(因此背景图像应用于主体)。

​

代码语言：javascript
复制
body{
    background-image: url('some url here') !important;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 100%;
    background-size: 1150px;
  }
  #blendElement{
    background: url('some other url here');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: 100%;
  }
代码语言：javascript
复制
<head>
</head>

<body>
 <div>
   <div id="blendElement"> This should have edges blending to the main (body's) background image behind it.
   </div>
 </div>
</body>

​

如果您曾经使用过PowerPoint并尝试过一种称为软边缘的图像效果，这正是我在这里所要做的。我能找到的唯一相关的“答案”是使用带内嵌的方框阴影的固体背景色：

代码语言：javascript
复制
box-shadow: 25px 25px 50px 0 (color matching background color) inset;

但由于身体有一个背景图像，而不是一个坚实的颜色，没有办法让它看起来像是在混合。显然，在框影中使用透明的颜色只会显示div背景图像，就像它通常看到的那样。

有人能帮我解决这个问题吗？(我不能编辑div图像来给它透明的渐变边缘，所以它必须直接用CSS或JS完成)

javascript
html
css
image
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2021-06-16 03:22:50

您可以使用mask-* CSS属性来实现此效果。

下面的示例生成一个10 The的长衰落边缘。

​

代码语言：javascript
复制
.body {
  display: grid;
  width: 200px;
  height: 200px;
  /* replace with the image you like here */
  background-image: repeating-linear-gradient(-45deg,
      yellow,
      yellow 20px,
      black 20px,
      black 40px);
}

.content {
  margin: 25px;
  /* replace with the image you like here */
  background-image: linear-gradient(to top, blue 0%, blue 100%);
  
  /* for webkit-based browsers */
  -webkit-mask-image:
    linear-gradient(to top, black 0%, black 100%),
    linear-gradient(to top, transparent 0%, black 100%),
    linear-gradient(to right, transparent 0%, black 100%),
    linear-gradient(to bottom, transparent 0%, black 100%),
    linear-gradient(to left, transparent 0%, black 100%);
  -webkit-mask-position:
    center,
    top,
    right,
    bottom,
    left;
  -webkit-mask-size:
    100% 100%,
    100% 10px,
    10px 100%,
    100% 10px,
    10px 100%;
  -webkit-mask-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat;
   -webkit-mask-composite:
    source-out,
    source-over,
    source-over,
    source-over;
    
   /* for browsers which have implemented the official spec */
  mask-image:
    linear-gradient(to top, black 0%, black 100%),
    linear-gradient(to top, transparent 0%, black 100%),
    linear-gradient(to right, transparent 0%, black 100%),
    linear-gradient(to bottom, transparent 0%, black 100%),
    linear-gradient(to left, transparent 0%, black 100%);
  mask-position:
    center,
    top,
    right,
    bottom,
    left;
  mask-size:
    100% 100%,
    100% 10px,
    10px 100%,
    100% 10px,
    10px 100%;
  mask-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat;
  mask-composite:
    subtract,
    add,
    add,
    add;
}
代码语言：javascript
复制
<div class="body">
  <div class="content"></div>
</div>

​

它是如何工作的，以及如何定制？

它的工作方式是将5个子图像组合在一起，并使用复合图像作为元素的掩码。

让我们分离图像：(这里我使用background-*属性来模拟复合图像的效果)

​

代码语言：javascript
复制
.body {
  display: grid;
  width: 200px;
  height: 200px;
  grid-template: 200px / repeat(2, 200px 20px) 200px;
}

span {
  place-self: center;
}

.content1 {
  margin: 25px;
  background-image:
    linear-gradient(to top, black 0%, black 100%);
  background-position:
    center;
  background-size:
    100% 100%;
  background-repeat:
    no-repeat;
}

.content2 {
  margin: 25px;
  background-image:
    linear-gradient(to top, transparent 0%, black 100%),
    linear-gradient(to right, transparent 0%, black 100%),
    linear-gradient(to bottom, transparent 0%, black 100%),
    linear-gradient(to left, transparent 0%, black 100%);
  background-position:
    top,
    right,
    bottom,
    left;
  background-size:
    100% 10px,
    10px 100%,
    100% 10px,
    10px 100%;
  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat;
  background-blend-mode:
    normal,
    normal,
    normal;
}

.content3 {
  margin: 25px;
  background-color: black;
  -webkit-mask-image:
    linear-gradient(to top, black 0%, black 100%),
    linear-gradient(to top, transparent 0%, black 100%),
    linear-gradient(to right, transparent 0%, black 100%),
    linear-gradient(to bottom, transparent 0%, black 100%),
    linear-gradient(to left, transparent 0%, black 100%);
  -webkit-mask-position:
    center,
    top,
    right,
    bottom,
    left;
  -webkit-mask-size:
    100% 100%,
    100% 10px,
    10px 100%,
    100% 10px,
    10px 100%;
  -webkit-mask-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat;
   -webkit-mask-composite:
    source-out,
    source-over,
    source-over,
    source-over;
  mask-image:
    linear-gradient(to top, black 0%, black 100%),
    linear-gradient(to top, transparent 0%, black 100%),
    linear-gradient(to right, transparent 0%, black 100%),
    linear-gradient(to bottom, transparent 0%, black 100%),
    linear-gradient(to left, transparent 0%, black 100%);
  mask-position:
    center,
    top,
    right,
    bottom,
    left;
  mask-size:
    100% 100%,
    100% 10px,
    10px 100%,
    100% 10px,
    10px 100%;
  mask-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat;
  mask-composite:
    subtract,
    add,
    add,
    add;
}
代码语言：javascript
复制
<div class="body">
  <div class="content1"></div>
  <span>-</span>
  <div class="content2"></div>
  <span>=</span>
  <div class="content3"></div>
</div>

​

第一个图像将整个框填充为黑色。

第二个图像是使用add操作组合其余4个子图像的结果。这幅图像定义了边缘应该如何褪色。注意，图像是倒置的，即外部边缘是实心黑色，而内部边缘是透明的。

第三图像是通过从第一图像中减去第二图像来创建的。该图像用作掩码。

在应用掩码时，黑色像素意味着不褪色元素像素，50%透明像素表示元素像素衰减50%，100%透明像素意味着元素像素下降100% (不可见)。

您可以通过调整子图像的属性来自定义效果：

为了控制衰落的长度，通过declaration

  • To属性

  • 调整子图像的大小，使之具有非线性衰落，在边缘不完全衰落的linear-gradient()上增加更多的颜色停止，对颜色停止使用不透明的颜色，例如rgba(0, 0, 0, 0.5)

。

票数 4
EN

Stack Overflow用户

发布于 2021-06-16 02:49:23

您可以使用背景作为梯度，其中的边缘是rgba(0，0，0，0，0)。这样，它将顺利地与背景融合。但这不适用于图像。对于图像，您将不得不在梯度的背景颜色和rgba(0，0，0，0，0)的div中向外显示颜色。

票数 0
EN

Stack Overflow用户

发布于 2021-06-16 03:22:59

由于网站的主体上有背景图像，那么实现目标的最简单方法是使用Photoshop或任何图像处理工具编辑div图像本身，并将其保存为PNG格式，以保持褪色效果的透明度。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/67995632

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档