程序员经验分享-hwhale

CSS3如何制作矩形透明度渐变？

2024-01-01

我正在尝试在 CSS3 中制作矩形渐变，就像旧的一样：

filter: alpha(opacity=65, style=3)

很遗憾mask-image属性（我用来实现椭圆形的属性）没有矩形渐变选项。

（CSS3 之前的片段）

.foto_1 { filter: alpha(opacity=65, style=0); }
.foto_2 { filter: alpha(opacity=65, style=1); }
.foto_3 { filter: alpha(opacity=65, style=2); }
.foto_4 { filter: alpha(opacity=65, style=3); }
<div class="div_2"><img src="https://i.stack.imgur.com/HGRgk.jpg" alt=""><img class="foto_1" src="https://i.stack.imgur.com/HGRgk.jpg" alt=""></div><div class="div_2"><img src="https://i.stack.imgur.com/HGRgk.jpg" alt=""><img class="foto_2" src="https://i.stack.imgur.com/HGRgk.jpg" alt=""></div><div class="div_2"><img src="https://i.stack.imgur.com/HGRgk.jpg" alt=""><img class="foto_3" src="https://i.stack.imgur.com/HGRgk.jpg" alt=""></div><div class="div_2"><img src="https://i.stack.imgur.com/HGRgk.jpg" alt=""><img class="foto_4" src="https://i.stack.imgur.com/HGRgk.jpg" alt=""></div>

（CSS3 我能够重新创建的只是前 3 张图片）

/* CSS3 */
.foto_1 { filter: opacity(65%); }
.foto_2 { filter: opacity(65%); mask-image: linear-gradient(to left, transparent, black); }
.foto_3 { filter: opacity(65%); mask-image: radial-gradient(circle, black, transparent 65%); }
.foto_4 { filter: opacity(65%); }
<div class="div_2"><img src="https://i.stack.imgur.com/HGRgk.jpg" alt=""><img class="foto_1" src="https://i.stack.imgur.com/HGRgk.jpg" alt=""></div>
	<div class="div_2"><img src="https://i.stack.imgur.com/HGRgk.jpg" alt=""><img class="foto_2" src="https://i.stack.imgur.com/HGRgk.jpg" alt=""></div>
	<div class="div_2"><img src="https://i.stack.imgur.com/HGRgk.jpg" alt=""><img class="foto_3" src="https://i.stack.imgur.com/HGRgk.jpg" alt=""></div>
	<div class="div_2"><img src="https://i.stack.imgur.com/HGRgk.jpg" alt=""><img class="foto_4" src="https://i.stack.imgur.com/HGRgk.jpg" alt=""></div>

不幸的是，掩模图像属性（我用来实现椭圆形的属性）没有矩形渐变选项。

您可以使用多个掩码来构建它：

.foto_1 {
  -webkit-mask:
    linear-gradient(to right ,rgba(0,0,0,0.2) ,white ,rgba(0,0,0,0.2)),
    linear-gradient(to bottom,rgba(0,0,0,0.2) ,white ,rgba(0,0,0,0.2));
  mask:
    linear-gradient(to right ,rgba(0,0,0,0.2) ,white ,rgba(0,0,0,0.2)),
    linear-gradient(to bottom,rgba(0,0,0,0.2) ,white ,rgba(0,0,0,0.2));
  -webkit-mask-composite: source-in; /* For Chrome */
  mask-composite: intersect; /* For Firefox */
}
<img src="https://i.stack.imgur.com/HGRgk.jpg" alt="">
<img class="foto_1" src="https://i.stack.imgur.com/HGRgk.jpg" alt="">

更改色标以更好地查看矩形：

.foto_1 {
  -webkit-mask:
    linear-gradient(to right ,rgba(0,0,0,0.2) 20% ,white 20% 80%,rgba(0,0,0,0.2) 80%),
    linear-gradient(to bottom,rgba(0,0,0,0.2) 20%, white 20% 80%,rgba(0,0,0,0.2) 80%);
  mask:
    linear-gradient(to right ,rgba(0,0,0,0.2) 20% ,white 20% 80%,rgba(0,0,0,0.2) 80%),
    linear-gradient(to bottom,rgba(0,0,0,0.2) 20%, white 20% 80%,rgba(0,0,0,0.2) 80%);
  -webkit-mask-composite: source-in; /* For Chrome */
  mask-composite: intersect; /* For Firefox */
}
<img src="https://i.stack.imgur.com/HGRgk.jpg" alt="">
<img class="foto_1" src="https://i.stack.imgur.com/HGRgk.jpg" alt="">

避免前一个角点效应的另一个想法：

.box {
  display:inline-block;
  position:relative;
}
.box:before,
.box:after{
  content:var(--img);
  display:block;
  -webkit-mask:linear-gradient(to var(--d,bottom) ,rgba(0,0,0,0.1) ,white,rgba(0,0,0,0.1));
  mask:linear-gradient(to var(--d,bottom),rgba(0,0,0,0.1) ,white,rgba(0,0,0,0.1));
  clip-path:polygon(0 0,100% 100%,0 100%, 100% 0);
}
.box:after {
  position:absolute;
  top:0;
  left:0;
  --d:right;
  clip-path:polygon(0 0, 100% 100%, 100% 0,0 100%);
}
<div class="box" style="--img:url(https://i.stack.imgur.com/HGRgk.jpg)"></div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

Opacity

lineargradients

cssmask

CSS3如何制作矩形透明度渐变？ 的相关文章

  • 文本的彩虹色

    rainbowtext background image webkit gradient linear left top right top color stop 0 f22 color stop 0 15 f2f color stop 0

  • 在 Chrome 中为

    我已经看到这个问题多次出现 但没有任何明确的解决方案 我正在加载一个简单的视频

  • 网格布局：创建 CSS，以便元素在调整相邻元素大小时保持位置

    我想在网格布局中构建一个简单的图像库 并且我正在使用类似的东西悬停时缩放 http www javascript fx com navigation imagezoom general help help html缩放悬停图像 但我宁愿使用

  • 嵌套 DIV 的类似斑马的 CSS 样式

    我嵌套了 DIV 元素 但我不知道嵌套的级别 我需要每个都有与其父级不同的背景 创建类似斑马的颜色 我只使用两种背景 深色和白色 效果需要类似于在容器中设置奇数和偶数子级的样式 但在我的例子中 子级是嵌套的 我可以使用每个嵌套元素的规则来做

  • 中有样式表 吗？

    在内部链接 CSS 文件是一个坏主意吗 body 我读过 如果浏览器在外部找到另一个 CSS 文件 则它会被迫重新开始 CSS 渲染 head 只是因为它可能需要将样式应用于已经渲染的元素 另外 我认为 HTML 无法正确验证 我需要确认这

  • 使用溢出支持定位粘性填充材料[重复]

    这个问题在这里已经有答案了 我在用position sticky在我的应用程序中 在使用overflow属性来显示滚动条 我已经寻找了一个确实支持这种情况的polyfill 但到目前为止没有任何运气 有谁知道这样的polyfill shim

  • 鼠标悬停时放大图像而不使用 Jquery 推送其他图像？

    当您将鼠标悬停在图像缩略图上 例如 Google 图片正在使用的缩略图 时 我正在尝试创建图像放大效果 但是 我遇到了一个问题 即放大的图像根据放大的图像的位置不断将另一张图像推到另一个位置 这是我到目前为止所拥有的

  • 伪元素和 SELECT 标签

    是否select标签允许使用 after选择器是为了在之后创建一个伪元素吗 我在 Mac 上尝试过 Chrome Safari 和 Firefox 但似乎不起作用 这是我使用过的折衷方案 http jsfiddle net pht9d295

  • 动态突出显示时向

    添加项目符号点？

    Update 例子 p Text Text p 在示例中 是否可以选择第二个 文本 单词 p 元素并单击按钮仅动态添加项目符号点到选定的 单词 有没有可能 在一个 p p Text p 突出显示从 p 元素并添加项目符号点到按钮上动态单击的

  • css 适用于 Firefox/Chrome，但不适用于 IE

    我有这个 HTML 和 css 在 chrome firefox 中工作正常 但在 IE 上 标题布局超出了位置 并且悬停时未显示子菜单 您能帮忙吗

  • 如何防止 CFDocument 中的内容中间发生分页？

    我使用 cfdocument 标签从 html css 动态生成 PDF 文件 有些内容块我不想跨越多个页面 经过一番搜索后 我发现根据文档支持 page break inside 样式 然而 在我的测试中 声明 page break in

  • 如何适应特定子元素的宽度？

    problem 我正在尝试创建一个技能表 我无法问下一个问题为什么 所以我创建了一个新帐户并询问 当前状态 我想将元素的宽度与 meter 也就是说 如何设定区块的标准 meter 子元素 在上面的 gif 中 img meter 我想要保

  • 有没有办法将变量从 javascript 导入到 sass 或反之亦然？

    我正在制作一个依赖于块概念的 CSS 网格系统 所以我有一个基本文件 例如 max columns 4 block width 220px block height 150px block margin 10px 它被 mixin 使用 m

  • 扩展位置绝对div超出溢出隐藏div

    我已经好几个月没有做过CSS了 所以我可能会错过一些简单的东西 但无论解决方案是什么 我都无法弄清楚 所以问题就在这里 这是我的代码的简化版本 div style height 100 width 200px div style margi

  • 淘汰赛绑定，每个都可进行自定义

    我这里有一个情况 用于淘汰每个带有定制的绑定 这是我的代码 div div table tbody tr td td td td tr tbody table div div

  • 当百分比填充定义元素高度时忽略 max-height

    The max height当内部填充大于最大高度值时 属性值似乎被忽略 例如 在元素上设置此类会导致最大高度被忽略 max height ignored height 0 or auto makes no difference max h

  • @font-face 和 font-variant 是个坏主意吗？

    如果我使用 font face字体和font variant small caps对于相同的选择器 字体将回退到 Safari 中的下一个系统默认字体 我该如何解决这个问题 我一开始在创建一个示例来复制您的问题时遇到了一些麻烦 这让我意识到

  • HTML 元素的默认背景颜色是什么？白色还是透明？

    我只是被一个简单的问题困住了 想弄清楚 HTML 元素的默认背景颜色是什么 是白色的还是透明的 默认背景颜色是透明的 看这里 https developer mozilla org en docs Web CSS background co

  • 使用@font-face时浏览器下载什么字体

    font face 有点令人困惑 因为所有浏览器都无法决定使用哪种文件格式 下面是我目前正在使用的向网站添加 1 个新字体的方法 您可以看到有 4 个单独的字体文件 我知道每个文件都是因为某些浏览器支持不同的格式 但浏览器是下载所有文件还是

  • 如何使用 jQuery 或 JavaScript 聚焦 或 标签？

    for var i 0 i

随机推荐

热门标签