- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个带有模糊背景图像的小页面。最重要的是,我将 div 设置为在背景图像上有透明覆盖的卡片。我正在尝试使用混合模式设置文本效果而不考虑叠加层。
我要复制的文字效果在这个codepen:https://codepen.io/thebabydino/pen/JNWqLL
具体来说,我想复制左侧的示例,其中投影与文本一起反转,文本是下方图像的反转。
在我这样做的尝试中,我一直无法获得混合模式效果来忽略不透明层并只关注图像。
不透明层的目的是帮助文本更加突出,但它似乎会产生相反的效果,因为它会影响混合,使一切变得更暗。
文本只有橙色,因为它由于较暗的不透明层而不断反转,并且完全忽略了下面的图像。
这是我目前的尝试:
html,
body {
min-height: 100vh;
display: flex;
flex-direction: column;
webkit-font-smoothing: antialiased;
moz-osx-font-smoothing: grayscale;
font-family: 'Squada One', sans-serif !important;
}
body::before {
content: '';
background-image: url("https://images.unsplash.com/photo-1641119554941-1c286b163e1c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1920&q=80");
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
position: fixed;
z-index: -1;
filter: blur(2.5px);
width: 100vw;
height: 100vh;
transform: scale(1.1);
}
.parenttile {
margin: 0 auto;
text-align: center;
display: flex;
align-items: center!important;
}
.link_wrapper2 {
width: auto;
padding: 0px;
}
.boxborder {
border-color: blue;
border-width: 0.3em;
border-style: solid;
border-radius: 15px !important;
}
.front {
position: relative;
z-index: 2 !important;
}
.blend {
text-shadow: 0 2px 2px #fdee00;
-webkit-filter: invert(100%);
filter: invert(100%);
mix-blend-mode: lighten;
}
.test-box:before {
content: ' ';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.20);
z-index: 1;
}
.test-box {
background-image: url("https://images.unsplash.com/photo-1641225635705-139a1a5e3938?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=261&q=80");
background-size: cover;
background-repeat: no-repeat;
height: 150px;
border-radius: 15px !important;
position: relative;
}
header.blending h2 {
color: white;
text-shadow: 0 3px 1px orange;
mix-blend-mode: difference;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Box Test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css" integrity="sha512-IgmDkwzs96t4SrChW29No3NXBIBv8baW490zk5aXvhCD8vuZM3yUSkbyTBcXohkySecyzIrUwiF/qV0cuPcL3Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="columns is-centered desktop front">
<div class="column is-9">
<div class="tile is-ancestor parenttile ml-3 mr-3">
<div class="tile is-4 is-parent">
<div class="tile is-child box test-box boxborder has-text-white has-text-centered" style="overflow:hidden;">
<a href="#">
<div class="link_wrapper2 is-align-items-center is-flex blend front">
<header class="blending">Contrasting Text Example</header>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
如何使用混合混合模式效果来反转下面的图像,同时忽略文本和图像之间的叠加层?如果这种特定方法不可行,有什么替代方法可以达到相同的结果?
最佳答案
半透明覆盖层将始终为整张卡片添加阴影。我们可以在叠加层中使用相同的图像并将其淡化到那里。
html,
body {
min-height: 100vh;
display: flex;
flex-direction: column;
webkit-font-smoothing: antialiased;
moz-osx-font-smoothing: grayscale;
font-family: 'Squada One', sans-serif !important;
}
body::before {
content: '';
background: black background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
position: fixed;
z-index: -1;
filter: blur(2.5px);
width: 100vw;
height: 100vh;
transform: scale(1.1);
}
.parenttile {
margin: 0 auto;
text-align: center;
display: flex;
align-items: center !important;
}
.link_wrapper2 {
width: auto;
padding: 0px;
}
.boxborder {
border-color: blue;
border-width: 0.3em;
border-style: solid;
border-radius: 15px !important;
}
.front {
position: relative;
z-index: 2 !important;
}
.blend {
text-shadow: 0 2px 2px #fdee00;
-webkit-filter: invert(100%);
filter: invert(100%);
mix-blend-mode: lighten;
}
.img1 {
background-image: url("https://images.unsplash.com/photo-1641225635705-139a1a5e3938?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=261&q=80");
}
.img2 {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_04_cat_bg_02.jpg");
}
.img3 {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_04_cat_bg_01.jpg");
}
.test-box {
background-size: 101% 101%;
background-repeat: no-repeat;
height: 150px;
border-radius: 15px !important;
position: relative;
}
.test-box::before {
content: ' ';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 15px !important;
background-size: 100% 100%;
background-repeat: no-repeat;
background-color: #faa4;
/*blending #faa4 with background image to make it look fade out*/
background-blend-mode: lighten;
}
/*add image to the pseudo element and then fade it*/
.img1.test-box:before {
background-image: url("https://images.unsplash.com/photo-1641225635705-139a1a5e3938?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=261&q=80");
}
.img2.test-box:before {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_04_cat_bg_02.jpg");
}
.img3.test-box:before {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_04_cat_bg_01.jpg");
}
header.blending {
color: white;
text-shadow: 0 3px 1px orange;
mix-blend-mode: difference;
font-size: 5rem;
font-weight: bolder;
filter: saturate(4);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css" integrity="sha512-IgmDkwzs96t4SrChW29No3NXBIBv8baW490zk5aXvhCD8vuZM3yUSkbyTBcXohkySecyzIrUwiF/qV0cuPcL3Q==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="columns is-centered desktop front">
<div class="column is-4">
<div class="tile is-ancestor parenttile ml-3 mr-3">
<div class="tile is-12 is-parent">
<div class="tile is-child box test-box img1 boxborder has-text-white has-text-centered" style="overflow:hidden;">
<a href="#">
<header class="blending">Contra..</header>
</a>
</div>
</div>
</div>
</div>
<div class="column is-4">
<div class="tile is-ancestor parenttile ml-3 mr-3">
<div class="tile is-12 is-parent">
<div class="tile is-child box test-box img2 boxborder has-text-white has-text-centered" style="overflow:hidden;">
<a href="#">
<header class="blending">Contra..</header>
</a>
</div>
</div>
</div>
</div>
<div class="column is-4">
<div class="tile is-ancestor parenttile ml-3 mr-3">
<div class="tile is-12 is-parent">
<div class="tile is-child box test-box img3 boxborder has-text-white has-text-centered" style="overflow:hidden;">
<a href="#">
<header class="blending">Contra..</header>
</a>
</div>
</div>
</div>
</div>
</div>
另一种方法是使用background-clip:text
:
.img {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img1 {
background-image: url("https://images.unsplash.com/photo-1641225635705-139a1a5e3938?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=261&q=80");
}
.img2 {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_04_cat_bg_02.jpg");
}
.img3 {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_04_cat_bg_01.jpg");
}
.img4 {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_04_cat_bg_03.jpg");
}
.img5 {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_04_art_bw_bg.jpg");
}
.wrapper {
border: 1px solid;
height: 200px;
width: 400px;
padding: 0;
border-radius: 15px !important;
position: relative;
background-color: #555;
/*blend background image with #444 */
background-blend-mode: screen;
}
.text {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
width: 100%;
margin: 0;
font-size: 80px;
font-weight: bolder;
font-family: cursive;
-webkit-text-fill-color: transparent;
color: transparent;
background-clip: text;
-webkit-background-clip: text;
filter: invert();
}
<div class="wrapper img img1">
<div class="text img img1"><span>CONTRAS</span></div>
</div>
<div class="wrapper img img4">
<div class="text img img4"><span>CONTRAS</span></div>
</div>
<div class="wrapper img img5">
<div class="text img img5"><span>CONTRAS</span></div>
</div>
<div class="wrapper img img3">
<div class="text img img3"><span>CONTRAS</span></div>
</div>
<div class="wrapper img img2">
<div class="text img img2"><span>CONTRAS</span></div>
</div>
关于html - 是否可以在忽略不透明层的同时使用 mix-blend-mode 模糊背景?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70571104/
我正在开发基于桌面 (Windows 7) 的应用程序,并使用 Qt Creator v 5.6.0 开发程序。我有一个非常奇怪的问题,即 我的程序在 DEBUG 模式下崩溃,但在 RELEASE 模
我爱org-tables ,我用它们来记录各种事情。我现在正在为 Nix 记录一些单行代码(在阅读了 Domen Kožar 的 excellent guide 后,在 this year's Eur
org-mode 是否有一个键绑定(bind)可以在编号/项目符号列表项之间移动,就像您可以对标题一样? 喜欢的功能: org-forward-heading-same-level 大纲下一个可见标题
我知道这有点小,但它一直困扰着我。我正在为一个项目使用 Org-mode,我倾向于经常导出为 PDF 或 HTML,这使我的目录中散落着 PDF、Tex 和 HTML 文件。有没有办法将 Org 模式
有什么方法可以让 org-mode 继续编号列表而不是重新启动? 这是情况。你列了一个类似的列表: Sometimes you can restart the display by doing som
如何在组织模式文件中生成所有标签的枚举列表(例如 :tag:)?假设我有一个以下形式的列表: * Head1 :foo:bar: ** Subhead1 :foo: * Head2
我正在使用 org-mode(Emacs:24.3.1,org-mode: 7.9.3f 8.0.6)作为不同代码片段的数据库语言(目前主要是 elisp 和 python)。这在使用 org-mod
相关问题:org-mode: fontify code blocks natively 截至 2012 年 11 月 1 日,我已经获得了最新的 org-mode 和 emacs 版本(组织存储在 o
有谁知道在使用 ido 模式时区分 dired 模式缓冲区名称与迷你缓冲区中其他类型缓冲区的好方法吗?例如...在 dired 模式缓冲区名称末尾显示正斜杠? 最佳答案 您可以简单地更改dired-m
在这个示例脚本中 import argparse parser = argparse.ArgumentParser() parser.add_argument('--modes', help="tes
我第一次学习“操作系统”。在我的书中,我发现了关于“用户模式”和“内核模式”的这句话: "Switch from user to kernel mode" instruction is execute
我刚刚下载了 Processing 2.0 并尝试从“模式管理器”安装 Android 模式。但是在安装时出现错误提示:“无法将模式“Android 模式”移动到速写本”。我怎样才能摆脱这个错误? 最
在 android L 中,我尝试将相机闪光灯模式设置为 TORCH,它工作正常,但我无法将其更改回闪光灯模式 AUTO 或闪光灯模式 打开。我只能返回闪存模式 OFF。我尝试了像 camera360
有 2 台机器,A 和 B。有 2 个分支,p16 和 c2。 A 有一个 ext3 文件系统,但在 B 上,存档位于带有 vfat 的 truecrypt 驱动器上,mount 显示 rw,uid=
我有 linum-mode在我的 Emacs 配置中全局启用。全局启用意味着它也适用于不受欢迎的速度条。 我为这个问题找到的唯一建议是在存档的 Emacs 帮助邮件列表中,它建议以下 speedbar
Google Cloud Firestore 将很快取代旧的 Google Cloud Datastore。然后可以选择在“ native 模式”或“数据存储模式”下使用 Cloud Firestor
org-mode的版本我的版本 Emacs 附带的(24.5.2) 是 8.2.10 .我已安装版本 8.3.1从 ELPA 并将其添加到我的 init 文件中: (add-to-list 'load
The org-mode manual指出 org-mode 将“”“...在 shell 链接”“”中执行命令,但它不显示此类链接的语法。 我希望能有一个简单完整的示例来说明这种 shell 链接是
我正在尝试在 emacs 24 中使用 dart 模式和 d 模式。如果我单独使用任何一种模式,一切都很好。如果我分别对每种类型的文件使用这两种模式,我在尝试缩进 D 代码时会出错。 以下是在初始化时
我的应用程序中有 CupertinoDatePicker 以使用以下代码选择日期和时间: formatColumn( widget: Consumer( builder: (_, mcProvide
我是一名优秀的程序员,十分优秀!