将背景颜色的下边缘设为另一种颜色

2023-12-26

我想要我的底部background-color成为另一种颜色。我确信这涉及到linear-gradient?但不确定如何实施

示例代码:

.background{
  height:100px;
  width:200px;
  background-color: #11143b;
  background: linear-gradient(top, red, red 70%, transparent 70%, transparent 100%);
}
<div class="background">
</div>

How I eventually want the above code to look: enter image description here

任何帮助,将不胜感激。


简单地像这样:

.background{
  height:100px;
  width:200px;
  background: 
    linear-gradient(to bottom right, transparent 49%,red 52%) bottom / 100% 20px no-repeat,
    #11143b;
}
<div class="background">
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将背景颜色的下边缘设为另一种颜色 的相关文章

  • HTML/CSS - 打印样式、背景颜色和图像不会在 IE 和 Firefox 中显示?

    我如何在打印时显示背景颜色和图像 我知道这是浏览器属性 但我想从 CSS 完成它 例如我用于 webkit 的 CSS webkit print color adjust exact 那么我怎样才能实现它呢 不 这是不可能的 请参阅 web
  • TransitionEnd 事件未触发?

    我有多个元素 每个元素都以 某种程度上 持续时间进行动画处理 我使用 CSS3 过渡 jQuery 库和transitionend辅助函数来自大卫 沃尔什 https davidwalsh name css animation callba
  • 禁用输入字段上的文本选择

    我正在使用 IBM Worklight HTML5 CSS3 和 javascript 开发混合应用程序 有没有可能的方法来禁用输入字段上的文本选择 我的屏幕上有一个用户名和密码字段 并且希望禁止用户在输入字段中选择文本 另外 应禁用复制粘
  • 的 CSS margin-top 影响父级的边距

    我已经研究这个问题有一段时间了 但还没有找到直接的答案 当向元素添加页边距顶部时 就我而言 它主要发生在标题上 在许多情况下 边距顶部是与父级共享的 HTML div h1 My title h1 div CSS div padding 2

  • CSS 变换函数顺序

    为什么以下之间的输出存在差异 transform translate 0 100px scale 2 2 and transform scale 2 2 translate 0 100px 第一条语句符合您 我 的期望 将元素向下移动 10
  • 使用 node-sass 监视整个目录时指定输出文件名

    目前 我可以在查看单个 SCSS 文件时使用 package json 文件中的 node sass build 命令指定文件名 sass build node sass src scss main scss dist css main m
  • 使用 Jsoup 选择没有类的 HTML 元素

    考虑一个像这样的 html 文档 div p p p p p class random class name p div 我们怎样才能选择所有p元素 但不包括p元素与random class name class Elements ps b
  • 在响应模式下使用 CSS 更改元素顺序

    图1为桌面模式 下面两张图片和文字 总共三个div 图 2 是我希望它在移动浏览器 例如手机 中的显示方式 关于如何实现这一点有什么想法吗 我愿意接受任何建议 这个想法是让文本显示在图像上方 以最好地说明这两个图像的描述 在桌面版本中将文本
  • CSS 变换源不能与 translate() 一起使用

    我想将 div 从中心点移开 但似乎translate 不关心变换原点是什么 并使用元素的左上角来移动它 这是一个测试来证实这一点 div class items div class item 1 style width 100px hei
  • 交替 div 使图像向左(偶数)或向右(奇数)

    我正在尝试更好地排列图像 而不仅仅是一列中的图像 请参阅附件中的示例 每篇文章的图像可以位于左侧和右侧 这是我的代码 HTML section class content list page section
  • 如何设置引导开关的 css 颜色?

    如何在此引导开关中将蓝色更改为另一种颜色 我尝试更改输入元素的颜色和背景颜色 但它没有更改开关颜色 这是 html 和 bootstraplink https getbootstrap com docs 4 2 components for
  • 使用jquery和css点击按钮后旋转div文本

    我想使用 jquery 和 css 单击按钮后旋转 div 文本 如果用户点击Rotate Left按钮 然后文本在左侧旋转 or用户点击Rotate Right按钮然后文本在右侧旋转 Example div Happy Birthday
  • 没有嵌套容器的桌面和移动 Flexbox 布局

    我有 3 个 div 它们必须按移动布局的特定顺序排列 但我必须将第 2 个 div 作为桌面布局的侧边栏 所以对于移动设备 分区1 分区2 分区3 对于桌面 分区1 div2 分区3 在桌面布局中 div 2 有阴影背景 因此必须是父级的
  • 相对于变换元素的绝对定位元素位置

    我重新创建了我在模板中遇到的问题 有一个nav具有position relative 在 的里面nav有一个div有两个嵌套列表 其中一个列表的位置绝对固定在列表的底部nav 当div对其应用了变换 当 的时候div在绝对和相对定位的元素之
  • 使组合高度等于浏览器窗口的高度

    http featuredfotografer com http featuredfotografer com Codemirror div 与 header div 结合占用的高度超过了浏览器的高度 我怎样才能使它们的总高度达到浏览器窗口
  • 如何在 div 容器内的元素之间留出空间

    我有一个弹性容器 它将由元素动态填充 容器没有固定宽度 I use max width max content 并且可以包含我想要的任意数量的元素 问题是我需要这些元素之间的间距 但不需要元素和容器之间左侧和右侧的间距 当然我可以用 ele
  • Symfony 2 使用 CSS 设置背景图片

    I want to put a background image for a menu in symfony But I can t figure out how to do it I managed to style a lot of t
  • `ie9` - contenteditable false 在父级可编辑时不起作用

    我正在尝试制作内容可编辑和不可编辑的容器 用户可以通过 3 种方式使用它 他们可以将内容与non editable 他们可以将内容与editable 他们可以在不选择其中之一的情况下放置内容 可编辑 我正在努力实现以下目标 content
  • 跨浏览器:禁用输入字段的不同行为(文本可以/不能复制)

    我有一个被禁用的输入 html 字段 在某些浏览器 Chrome Edge Internet Explorer 和 Opera 中可以选择并复制文本 但至少在 Firefox 中这是不可能的 您可以通过在不同浏览器中执行以下代码来测试
  • CSS:缩放字体大小以适应父块元素的高度

    我发现的几乎每个问题和答案都谈到了视口大小 这确实不是我的问题 拿着这支笔 https codepen io njt1982 pen pZjZNM https codepen io njt1982 pen pZjZNM 我有一个非常基本的

随机推荐

  • URL 协议处理程序安全警告

    我有一个自定义 url 协议处理程序 用于处理 myhandler path to something 形式的 url 它被注册到本地安装的客户端应用程序 该应用程序处理请求并执行 正确的操作 然而 当我在 Outlook 2007 中有这
  • PayPal Express Checkout 即时更新未更新运费

    我正在使用 Paypal Express Checkout 一切正常 除了在调用回拨时承运商未更新之外 我可以验证回调是否被调用 调用已记录 当 Paypal 调用包含客户发货国家 地区的回调 URL 时 我返回以下值 METHOD Cal
  • SQL Server 中 7 天滚动平均值的 SQL 查询

    我有一个每小时产品使用情况 产品使用次数 数据的表格 ID bigint ProductId tinyint Date int YYYYMMDD Hour tinyint UsageCount int 1 20140901 0 10 1 2
  • 单页应用程序 (SPA) 的单点登录 (SSO) 解决方案/架构

    我研究 SPA 的 SSO 解决方案已经有一段时间了 有很多解决方案存在细微的差别 同时我还发现并不是每个人对 SSO 都有相同的理解 并且没有多少针对 SPA 的 SSO 既定模式 因此 我并不是要求详细的设计 架构 而是只是尝试看看这个
  • C# listview - 嵌入控件

    任何人都可以帮助我在列表视图中嵌入控件吗 我需要添加按钮控件作为列表视图的子项 谢谢 好吧 您可能正在谈论 Windows 窗体ListView http msdn microsoft com en us library system wi
  • Twitter Bootstrap 导航栏菜单滚动

    使用时twitter bootstrap 3 在移动设备菜单上nabber有水平和垂直滚动条 它不在那里2 3我不知道如何禁用它并让菜单项扩展至完整而没有任何滚动条 这是 Bootstrap 3 的新功能 最好的方法是删除或注释掉 less
  • 是否可以将JavaFX的WebView更改为Chrome

    我们正在尝试创建一个使用 html5 canvas 打开 url 的桌面应用程序 我们使用 Java 8 JavaFX 实现它 但我们在渲染草图时遇到了糟糕的反应 这在 Chrome 浏览器中运行良好 是否可以在JavaFx应用程序中嵌入c
  • 拆分 pandas 中的地址列

    我有一个像这样的熊猫数据集 import pandas as pd data id 001 002 003 004 address William J Clare n290 Valley Dr nCasper WY 82604 nUSA 1
  • 为什么 Boost.Spirit 能够正确地将标识符解析为 std::string,而不是解析为仅由 std::string 组成的改编结构?

    我为标识符定义了一条规则 以字母字符开头 后跟任意数量的字母数字字符 当我直接解析为时 我得到不同的结果std string与包含单个的改编结构相比std string 如果我的语法的属性是std string Qi 会正确地将字符顺序调整
  • 如何设置程序的CPU亲和力?

    我有一个用 C 编写的程序 我使用 VSTS 2008 Net 3 5 Windows Vista Enterprise x86 来开发 Windows 窗体应用程序 我当前的计算机是双核CPU 我想将程序的CPU亲和力设置为在特定CPU上
  • Linq动态在哪里算?

    是否可以在 where 中使用列表 我想要这样的东西 public class Customer string FirtsName string LastName int Number 我想使用复选框来过滤客户 如果我选择名字和号码 那么将
  • (heroku) 错误 R10(启动超时)-> Web 进程未能在启动后 60 秒内绑定到 $PORT

    我是一名初级 Discord 机器人开发人员 希望在 Heroku 上 24 7 托管他的 heroku 机器人 大约之后 部署 1 分钟后 出现错误 2020 12 28T11 40 54 000493 00 00 heroku web
  • Flutter Firebase 存储无法工作:没有默认存储桶

    我正在尝试上传一个pdf file to Firebase Storage使用此功能 static Future
  • Django ModelForms:将ManyToMany字段显示为单选

    在 Django 应用程序中 我有一个模型 Bet 其中包含与 Django 用户模型的 ManyToMany 关系 class Bet models Model participants models ManyToManyField Us
  • 触发AWS代码构建时指定文件路径

    我已经创建了 AWS codebuild 管道 每当我推送到主分支时它就会自动触发 现在 我只想在 Dockerfile 中发生更改时触发它 以下是我的项目结构 casestudy gt Docker gt Dockerfile gt In
  • “图标路径无效” - Apple App Store 团队返回错误

    这是我第一次向 App Store 提交内容 遇到了很多问题 首先 我要说的是 该应用程序是用PhoneGap 使用科尔多瓦1 9 0框架 它的 Web 应用程序端很好 验证了 W3 并且在浏览器中完美运行 在无法手动修复问题后 我从头开始
  • 如何在 PlayFramework 中的 Json Reads 中添加自定义 ValidationError

    我正在使用 play Reads 验证助手 我想在 json 异常的情况下显示一些自定义消息 例如 长度是最小值然后指定或给定的电子邮件无效 我知道 play 显示这样的错误消息error minLength但我想显示一条合理的消息 例如请
  • 在 Mayavi 中锁定相机

    我正在尝试使用 mayavi 中的一系列数据文件制作动画 不幸的是 我注意到相机没有锁定 它正在变焦和缩小 我认为发生这种情况是因为我的网格的 Z 分量正在变化 并且 Mayavi 正在尝试重新计算比例 How can I fix it i
  • 使用每个用户数据的单独密钥加密 SQL Server Azure 数据库中的数据

    我正在尝试创建基于 Azure SQL 数据库后端的服务 该服务将是多租户的 并将包含来自多个 客户端 可能有数十万 的高度敏感信息 这些信息必须彼此严格隔离并严格防止数据泄漏 按设计 使用如此多的单独数据库是不可行的 因为会有很多客户 但
  • 将背景颜色的下边缘设为另一种颜色

    我想要我的底部background color成为另一种颜色 我确信这涉及到linear gradient 但不确定如何实施 示例代码 background height 100px width 200px background color