程序员经验分享-hwhale

::after 伪元素出现在之前

2024-01-12

我试图在渐变的顶部和底部创建一个微妙的波浪。但是， ::after 伪元素出现在主要内容之前而不是之后。目前它显示为::before、::after、主要内容，但我希望它显示为::before、主要内容、::after。

这是我的代码：

#gradient {
  background: #0068a9;/* For browsers that do not support gradients */
  background: -webkit-linear-gradient(rgba(0, 104, 169, 1), rgba(0, 104, 169, .9));/*Safari 5.1-6*/
  background: -o-linear-gradient(rgba(0, 104, 169, 1), rgba(0, 104, 169, .9));/*Opera 11.1-12*/
  background: -moz-linear-gradient(rgba(0, 104, 169, 1), rgba(0, 104, 169, .9));/*Fx 3.6-15*/
  background: linear-gradient(rgba(0, 104, 169, 1), rgba(0, 104, 169, .9));/*Standard*/
  width: 100%;
  height: 300px;
  min-height: 0px;
  display: block;
}

#gradient::before,
#gradient::after {
  display: block;
  content: "";
  width: 100%;
  height: 75px;
}

#gradient::before {
  background: #f2f2f2 url("http://www.qumidesignco.com/clients/preparedcapital/pc_topcurve.png") center top;
}

#gradient::after {
  background: #f2f2f2 url("http://www.qumidesignco.com/clients/preparedcapital/pc_bottomcurve.png") center top;
}
<div style="background:#f2f2f2; width: 100%; height: 300px; min-height: 0px; display:block;"></div>
<div id="gradient"></div>
<div style="background:#f2f2f2; width: 100%; height: 300px; min-height: 0px; display:block;"></div>

做你的gradient div relative , :before and :after absolute and top:0 in :before and bottom:0 in :after

#gradient {
  background: #0068a9;/* For browsers that do not support gradients */
  background: -webkit-linear-gradient(rgba(0, 104, 169, 1), rgba(0, 104, 169, .9));/*Safari 5.1-6*/
  background: -o-linear-gradient(rgba(0, 104, 169, 1), rgba(0, 104, 169, .9));/*Opera 11.1-12*/
  background: -moz-linear-gradient(rgba(0, 104, 169, 1), rgba(0, 104, 169, .9));/*Fx 3.6-15*/
  background: linear-gradient(rgba(0, 104, 169, 1), rgba(0, 104, 169, .9));/*Standard*/
  width: 100%;
  height: 300px;
  min-height: 0px;
  display: block;
  position: relative;
}

#gradient::before,
#gradient::after {
  display: block;
  content: "";
  width: 100%;
  height: 75px;
  position: absolute;
}

#gradient::before {
  background: #f2f2f2 url("http://www.qumidesignco.com/clients/preparedcapital/pc_topcurve.png") center top;
  top:0;
}

#gradient::after {
  background: #f2f2f2 url("http://www.qumidesignco.com/clients/preparedcapital/pc_bottomcurve.png") center top;
  bottom: 0;
}
<div style="background:#f2f2f2; width: 100%; height: 300px; min-height: 0px; display:block;"></div>
<div id="gradient"></div>
<div style="background:#f2f2f2; width: 100%; height: 300px; min-height: 0px; display:block;"></div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

pseudoelement

::after 伪元素出现在之前 的相关文章

  • 网页执行回发时如何停止在注册表单上？

    我正在做我的最后一年的项目 其中 我在一页上有登录和注册表单 WebForm 当用户点击锚点时Sign Up下拉菜单ddlType 隐藏 和文本框 txtCustName txtEmail and txtConfirmPassword 显示

  • Firefox 无法正确渲染：border-radius、box-shadow 和 border

    在下面的例子中 http jsfiddle net Du8f6 3 http jsfiddle net Du8f6 3 我将内部阴影设置为容器和 10px 边框 并将边框半径设置为 50 结果是容器边框外有奇怪的细白色边框 细白色边框在以下

  • 在一个区域显示隐藏 div

    我一整天都在寻找与我想要的东西相匹配的东西 但我在任何地方都找不到任何东西 我想创建一个显示隐藏 div 在一个固定区域显示 隐藏 div 我想要在页面的一半上有一个拇指图库 在页面的另一半上我想显示与该拇指相关的完整配置文件 因此当我单击

  • 无法将滚动条保持在底部

    我有这个代码 div div

  • CSS - 设置 Div 的大小以填充剩余空间

    我是 CSS 新手 我正在尝试创建模板的准系统结构 我有一个用于页眉 主要内容和页脚的 div 我的页脚和页眉很好 但我需要主要内容 div 来 填充 页眉和页脚之间的剩余空间 我尝试将 padding bottom 属性设置为与页脚相同的

  • 与 contenteditable 相关的用户事件

    I am a beginner in Javascript HTML5 假设我有一个 contenteditable div 我的 HTML5 窗口中的 block level 元素 是什么详尽的用户可以通过用户交互修改此元素 或某些子元素

  • 使用 Javascript 在标签中的内容之前附加元素

    我将用一个例子来说明 我需要用javascript转换以下html a Text 1 a a Text 2 a a Text 3 a to code a a

  • HTML 表格信息

    我想知道是否有任何方法可以使 html 中的表格看起来像这样 http i43 tinypic com 21dml8l png http i43 tinypic com 21dml8l png 我基本上需要第一列中的 1 个大单元格 然后第

  • Javascript 当我们在 Chrome 中选择“停留在页面上”时如何调用函数

    请在 Chrome 浏览器中检查我的代码 如果您点击刷新 系统会提示您 2 个选项 离开此页面并 保持此页上 当我点击2 停留在此页面按钮它必须激活我的自定义功能显示消息 任何人都可以为我提供解决方案吗

  • 粘性页脚不粘在 AngularJS 中

    Im working an angular site and im trying to implement a sticky footer across all views but the footer stops sticking whe

  • 如何在图像上叠加徽标？使用CSS

    正如您所看到的 徽标显示在背景图像上方 但我希望它位于背景图像的中心 这是我的标题 背景需要从页面顶部开始并在菜单之前结束 徽标需要显示在背景图像的中央 我已经尝试了很多 但也许有人遇到了类似的问题 可以帮助我解决这个问题 这张图片显示它几

  • 更改网格模板列会破坏布局

    定义时grid template columns在相应的父 div 中这很好 wrapper display grid grid template columns 1fr 1fr 700px 但是如果我只想要两列怎么办 如果我删除其中之一f

  • 在生产中使用 css / javascript 源映射对性能有何影响？

    生产环境中应该使用源映射吗 除了调试之外 它们还有什么好处吗 由于额外的服务器往返 它们是否会影响应用程序加载时间 浏览器是否足够智能来加载 map应用程序加载和渲染后的资产 如果浏览器找不到 map asset 404错误 会对性能产生影

  • 如何绕过 IE8 对 data:uri Base64 编码的 32k 限制？

    我需要向浏览器发送包含 1920x1080 png 的 html 响应 这是一个 html 查询截取的屏幕截图 我对图像进行 base64 编码 并将其作为 text html 内容类型嵌入发送 一些简单的事情 比如 Whatever im

  • 如何在 vuejs 中防止/停止点击传播

    我有一个递归列表 树 每个元素都有一个 click sayHello el id 现在的问题是 因为它是一个嵌套列表 例如 list element 0 01 list el 1 01 list el 2 01 list el 1 02 l

  • 如何让更大的布局适合小设备屏幕？

    我有一个小问题meta viewport元素 问题是我的布局min width比我想要使用的许多屏幕分辨率都要大 所以将其设置为 没有帮助 结果我得到的页面必须缩小以适应设备宽度 如果我什至添加像 它也不起作用 发现了一个黑客来自CSS 技

  • 在文档流中提取一个元素

    这是示例代码 top background lightGreen content outline 1px solid red bottom background lightBlue div Top div div Lorem ipsum d

  • 内部样式表中的 HTML 注释标签[重复]

    这个问题在这里已经有答案了 可能的重复 注释掉 HTML 文档中的样式表以支持旧版浏览器 https stackoverflow com questions 6825773 commenting out stylesheets in htm

  • CSS - 最大宽度和椭圆

    我有一个包含文本的跨度 我希望跨度扩大到最大 500px 以容纳里面的文本 达到最大值后 我希望文本为任何溢出最大宽度的文本显示省略号 这可能吗 我尝试了以下方法 但这并没有达到目的 Thanks position absolute top

  • Twitter Bootstrap 行过滤器/搜索框

    我无法找到有关如何为 Twitter Bootstrap 创建简单搜索查询或行过滤器的教程 我已经尝试了很多 我不确定是否我做错了什么或者插件与 Bootstrap 不兼容 如果可以的话请帮忙 我试过了 document ready fun

随机推荐

  • 适用于 Linux 的 C++ 对象序列化

    我正在编写一个需要通过网络发送和接收数据的程序 我从来没有处理过对象序列化 我读到了一些关于 Boost 和 Google Protocol Buffers 的建议 在 Linux 中使用哪个最好 如果您知道其他人 我将感谢您的帮助 Tha

  • Redis、StackExchange、与 MGET 配合使用，一次获取多个密钥

    有没有办法将 MGET 与 StackExchange Redis C 一起使用 我需要一种方法可以在一次通话中重奏多个按键 可以使用下一个方法 Task

  • 是什么让Python中的东西变得可迭代

    是什么让 Python 中的东西变得可迭代 IE 可以循环它for 我可以用Python创建一个可迭代的类吗 如果是这样 怎么办 要使类可迭代 请编写 iter 返回迭代器的方法 class MyList object def init s

  • CUDA - 如果我选择太多块怎么办？

    我仍然对这些未知大小的矩阵感到生气 每个维度可能在 10 20 000 之间变化 我正在查看 CUDA sdk 并想知道 如果我选择的块数量太高怎么办 就像 X 和 Y 维度上 9999 x 9999 块的网格一样 如果我的硬件具有无法容纳

  • git checkout my_branch 与 git checkout origin/my_branch

    我当时在branch1当我结帐时branch2像这样 两个分支都存在 git checkout origin branch2 然后我得到了一个分离头错误 You are in detached HEAD state You can look

  • 根据给定的 OpenApi/Swagger 规范验证请求负载和响应

    我们有一个 HTTP API 它是用Python 的拥抱框架 http www hug rest 但这并不是一成不变的 将来可能会被其他东西取代 在它旁边 我们手动写了一个OpenApi Swagger 2 0 规范文件 https git

  • 如何设置log4j属性文件？

    我有一个使用 log4j 的 Eclipse Java 项目 我无法将log4j配置文件设置为通过文件路径访问 我必须在 jar 中导出并运行该项目 这是我的尝试 public class Wita static Logger logger

  • ROR-使用回形针逐步生成多个图像

    我已经使用了 教程 here http sleekd com rails adding multiple images to a rails model with paperclip 但由于某种原因它不起作用 任何人都可以给我一个使用其他表

  • 如何每天自动从 git 存储库更新我的服务器文件

    我是这些服务器相关工作的菜鸟 我正在本地系统中编写一些 PHP 代码 并定期更新 github 中的存储库 每次我想测试我的应用程序时 我都会通过 FTP 将本地系统中的所有文件复制到我的服务器上 然后进行测试 现在我想知道是否有一种方法可

  • 服务和组件属性之间的 Angular2 数据绑定

    我需要对服务和组件属性之间的绑定以及 Angular2 中的数据绑定进行一些澄清 假设我有一个服务 单例 和一个组件 export class Service name Luke object id 1 getName return thi

  • 使用python提取一个句子

    如果该句子中存在特定单词 我想提取确切的句子 谁能告诉我如何用 python 做到这一点 我使用了 concordance 但它只打印单词匹配的行 快速提醒一下 断句实际上是一件非常复杂的事情 句号规则也有例外 例如 先生 或 博士 还有各

  • AttributeError：“KMeans”对象没有属性“inertia_”

    from sklearn cluster import KMeans import numpy import pandas as pd from pandas import read csv boston read csv desktop

  • 计算两个点阵列之间的成对角度矩阵

    我有两个点向量 x and y 成形 n p and m p 分别 举个例子 x np array 0 0 16341 0 98656 0 05937 0 25205 0 96589 0 05937 0 25205 0 96589 0 11

  • 在函数 (group_by) 中使用 dplyr 时出现问题

    我想使用 dplyr 进行一些数据操作 背景 我有一个调查权重和一堆变量 主要是李克特项目 我想对有和没有调查权重的每个类别的频率和百分比进行求和 举个例子 让我们只使用性别变量的频率 结果应该是这样的 gender freq freq w

  • 哪个 .NET 库具有写时复制集合？

    我正在搜索要在 C 程序中使用的 NET 写时复制集合 例如列表 字典等 哪些集合具有该属性 包括参考FSharp Core 然后你就可以访问多种不可变的集合 Set List Map etc 这些位于Microsoft FSharp Co

  • 如何在 Google Test 中使用不同模板测试多个模板类的相同行为？

    我正在练习 C 17 中的排序算法 并按如下方式实现了我的单元测试 以下编译和所有测试都是绿色的 template

  • Funq IoC 容器是否支持属性注入？

    我正在寻找一个 IoC 容器在我的 Compact Framework 应用程序中使用 尝试 Funq 我发现我找不到用它进行属性注入的方法 我浏览了该项目网站上的讨论及其单元测试 但我找不到任何属性注入的示例 Funq 支持属性注入吗 嗯

  • Django 迁移到新数据库

    我刚刚加入一个使用 Django 的项目 并尝试初始化我自己的开发服务器 当我尝试这样做时 我的一个应用程序的迁移失败 此应用程序的模型有一个 sorl thumbnail ImageField 用于添加徽标 尝试迁移时 我收到以下错误消息

  • [over.load]/1 中下面突出显示的句子是什么意思？

    下面突出显示的句子的含义是什么 它与函数模板有什么关系吗 过载 1 http eel is c draft over load 1 并非所有函数声明都可以重载 那些不能成为的 此处指定了重载 如果程序包含以下内容 则该程序是格式错误的 同一

  • ::after 伪元素出现在之前

    我试图在渐变的顶部和底部创建一个微妙的波浪 但是 after 伪元素出现在主要内容之前而不是之后 目前它显示为 before after 主要内容 但我希望它显示为 before 主要内容 after 这是我的代码 gradient bac

热门标签