Javascript 我可以在 CSS(甚至 JS)中将背景图像淡入另一个背景图像吗

发布于09月02日

我看到的一切基本上都是使用一个背景图像，上面有一个线性渐变，这对我来说是不起作用的:

我有两个div，它们的背景图像在垂直方向上彼此相邻，比如50px的重叠.I would like to make the top 50px of the background image on the second div into a gradient so it fades in from transparent.个

以下是开始的设置:

* {
  box-sizing: box-sizing:border-box;
}

div {
  width: 200px;
  height: 200px;
  padding: 10px;
  color: #fff;
}

.one {
  background-image: url('https://stevish.com/wpstevishcom/wp-content/uploads/2009/06/picture-0051-300x225.jpg');
}

.two {
  padding-top: 60px;
  margin-top: -50px;
  background-image: url('https://stevish.com/wpstevishcom/wp-content/uploads/2009/02/img_1530-large-225x300.jpg');
}

<div class="one">Unimportant content</div>
<div class="two">More unimportant content.</div>

这大概是我想要的样子:

我不能只是上传一个淡入另一个的背景图像，因为实际div的内容是可变高度的，背景只需要在两个div之间改变.

* { box-sizing: box-sizing:border-box; } div { width: 200px; height: 200px; padding: 10px; color: #fff; } .one { background-image: url('https://stevish.com/wpstevishcom/wp-content/uploads/2009/06/picture-0051-300x225.jpg'); } .two { padding-top: 60px; margin-top: -50px; background-image: url('https://stevish.com/wpstevishcom/wp-content/uploads/2009/02/img_1530-large-225x300.jpg'); -webkit-mask: linear-gradient(#0000, #000 50px); }

Javascript 我可以在 CSS(甚至 JS)中将背景图像淡入另一个背景图像吗

推荐答案

Javascript相关问答推荐

jest使用useLocate测试自定义挂钩

Vue Quill css仅应用于我的第一个Quill Editor组件+如何自定义工具栏

确定MutationRecord中removedNodes的索引

为什么从liveWire info js代码传递数组我出现错误？

我试图实现用户验证的reduxstore 和操作中出了什么问题？

传递一个大对象以在Express布局中呈现

类型脚本中只有字符串或数字键而不是符号键的对象

从mat—country—select获取整个Country数组

如何解决chrome—extension代码中的错误，它会实时覆盖google—meet的面部图像？'

按下同意按钮与 puppeteer 师

切换时排序对象数组，切换不起作用

JS—删除对象数组中对象的子对象

Next.js服务器端组件请求，如何发送我的cookie token？

JS：XML insertBefore插入元素

如何将数组用作复合函数参数？

检索相加到点的子项

自定义图表工具提示以仅显示Y值

Next.js中的服务器端组件列表筛选

更改agGRID/Reaction中的单元格格式

用于测试其方法和构造函数的导出/导入类