css - 将彩色图像png转换为彩色css渐变

标签 css png

我想将此 PNG 图像转换为 CSS 渐变颜色。如果我有这个 PNG 文件,我该怎么做?

Image used for header with repeat-x

最佳答案

简单地使用渐变 CSS 规则?

#grad {
    background: linear-gradient(black, white); /* Standard syntax */
}

#grad2 {
  background: red; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(red, yellow, green); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(red, yellow, green); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(red, yellow, green); /* For Firefox 3.6 to 15 */
  background: linear-gradient(red, yellow, green); /* Standard syntax */
}
<div id="grad">
  <br><br>
</div>

<div id="grad2">
  <br><br>
</div>

一些阅读:CSS Gradients

关于css - 将彩色图像png转换为彩色css渐变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37431547/

相关文章:

css - Responsiveness-如何用CSS控制PC显示的比例和布局?

php - HTML 表单 GET 结果显示在目标 div 中,然后立即消失

png - 道德困境 : Should I still cater for IE6 as a web-developer

swift - 如何在 iMessage 贴纸扩展中包含动画 png 序列?

java - 如何在java中以矩阵形式(x-y平面)使像素在[1-255]范围内?

python - PIL处理PNG的问题

html - 内部下拉菜单上的 Bootstrap 折叠动画

javascript - 在相对定位的 div 内定位跨度

javascript - 将数据 URL 图片拖到 Firefox 桌面上,或制作真正的 png

css - Firefox、IE9+ 问题,div 高度在 td 内为 100%(Chrome 上的工作示例)