css - 如何在一个 div 背景中制作嵌套颜色?

标签 css colors background html

如何在 css 中将多个嵌套颜色(或恰好是 2 种颜色)放入一个 div 中? 如果可以的话,我如何指定嵌套形式,如每种颜色的百分比、位置等?

我的意思是渐变,制作这样的背景:

enter image description here

最佳答案

如果这就是你的意思,你可以做一个 50/50 的背景,使用渐变,例如:

background: -webkit-gradient(linear, left top, right top, color-stop(50%,#000000), color-stop(50%,#333));

或者对于完整的渐变,例如:

-webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#000ed8)); 

这非常简单,您只需添加开始和结束颜色。另外,我在上面节省了空间,但如果您希望所有浏览器都支持,您当然也应该使用 -o-linear-gradient、-ms-linear-gradient、linear-gradient)。

还有一些工具可以帮助您:

http://www.colorzilla.com/gradient-editor/

关于css - 如何在一个 div 背景中制作嵌套颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19567257/

相关文章:

php - 将 PHP 背景颜色更改为 CSS 调用

algorithm - 选择类似于浅色的深色的算法

javascript - 悬停时更改 HighCharts 图表中的数据标签颜色而不更新系列

css - 删除 CSS 背景边框

javascript - 移除 Web-kit 输入背景

css - 制作一个 div 链接并在悬停时更改内容

html - BEM:如何确保正确类(父 block )的规则优先?

css - 确定字体 : browser support for Cambria and other fonts?

html - 如何让html5音频播放器响应式?

c# - 从颜色中去除透明度