Loading [MathJax]/jax/output/CommonHTML/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS:不应用线性渐变背景色

问CSS:不应用线性渐变背景色
EN

Stack Overflow用户

提问于 2019-06-27 04:20:32

回答 1查看 107关注 0票数 0

线性渐变颜色在所有浏览器中都有效吗？我正面临这样的问题，线性渐变色(黑色和灰色)在outlook和gmail中运行良好，但在web邮件和移动设备中不起作用。如何摆脱这个问题？谢谢

linear-gradients

EN

回答 1

Stack Overflow用户

发布于 2019-06-27 04:25:40

这取决于你如何编写你的css。最好给出所有浏览器的前缀，这样它就可以在所有浏览器上运行。例如，像这样

background-image:     -webkit-linear-gradient(right, #0c93C0, #FFF); 
background-image:      -moz-linear-gradient(right, #0c93C0, #FFF);
background-image:     -ms-linear-gradient(right, #0c93C0, #FFF); 
background-image:      -o-linear-gradient(right, #0c93C0, #FFF);
background-image:      linear-gradient(right, #0c93C0, #FFF);

对于低于IE10的Internet Explorer版本，您应该这样使用它：

/*IE7-*/ filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0);
/*IE8+*/ -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0)";

另外，在你使用它之前，我建议你看看它在不同的浏览器版本中是否兼容：https://caniuse.com/#search=linear-gradient

票数 -1

EN

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56783834

复制

相关文章

CSS设置DIV背景色渐变

FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0, startColorStr=#AC07BD, endColorStr=#f6f6f8); /*IE 6 7 8*/ background: -ms-linear-gradient(top, #AC07BD, #f6f6f8); /* IE 10 */ background:-moz-linear-gradient(top, #AC07BD, #f6f6f8);/

Vicsh

2018/05/16

2.9K0

css3线性、径向渐变

背景线性渐变 background: linear-gradient(); 第一个参数：（角度或者是一个线性的方向）可选的默认的是（to bottom）旋转的方向是顺时针的第二个参数：开始颜色 color 或者是百分比或者是长度第三个参数：结束颜色

河湾欢儿

2018/09/06

6270

CSS 03 线性渐变、径向渐变与重复性渐变

linear-gradient( [ || ,]? , [,]* ) < angle >:用角度指定渐变方向或者角度 to left to right to top to bottom .ceng{

卢衍飞

2023/02/13

1.6K0

wordpress建站:用CSS来创建渐变背景色

今天看到一个背景渐变的banner，看着比较好看，就感兴趣的学了一下，之前没用过这个css样式设置过背景的渐变和过渡，感觉比较好玩就记录一下：【阅读原文：https://www.zouaw.com/4600.html】

wordpress建站吧

2019/06/19

1.3K0

CSS3-canvas绘制线性渐变

<!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas绘制线性渐变-高级函数</title> </head> <body onLoad="draw('canvas')"> <canvas id="canvas" width="1300" height="500" /> <script type="text/javascript"> function draw(id){ var canvas = document.getEleme

xing.org1^

2018/05/17

8450

html背景色渐变

background filter mozilla opera web

一. Webkit浏览器 (1) 第一种写法： background:-webkit-gradient(linear ,10% 10%，100% 100%， color-stop(0.14,rgb(255,0,0)), color-stop(0.5,rgb(255,255,0)), color-stop(1,rgb(0,0,255)) );

码客说

2019/10/22

4.2K0

CSS：linear-gradient()背景颜色线性渐变

to right top = to top right ：从左下角到右上角，对角线角度

江一铭

2022/06/16

1.7K0

CSS：linear-gradient()背景颜色线性渐变

CSS3背景渐变属性 linear-gradient(线性渐变)和radial-gradient(径向渐变)建议收藏

CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。

全栈程序员站长

2021/12/20

1.4K0

CSS3背景渐变属性 linear-gradient(线性渐变)和radial-gradient(径向渐变)建议收藏

利用CSS线性渐变、阴影、缩放实现动画下雨效果

这个动画效果，如果让你来做，你会选择什么方式？相信很多小伙伴都会用gif图片。其实用css实现也很简单。

Javanx

2019/09/04

1.7K0

利用CSS线性渐变、阴影、缩放实现动画下雨效果

CSS3 渐变 — 径向渐变

HTML5学堂（码匠）：有了解上周CSS3线性渐变的大家想必能很快掌握CSS3的径向渐变，两者的实现方法大同小异，但CSS3的径向渐变比线性渐变稍微复杂些，颜色不再沿着一条直线轴变化，而是从一个起点朝所有方向混合，属性参数也繁多复杂，不过别担心，下面会为大家详细介绍。本文主要内容 1. 径向渐变简介 2. 径向渐变属性与参数 3. 径向渐变基本用法 1、径向渐变简介 CSS3径向渐变，是一种从起点到终点颜色从内到外进行圆形渐变，就像从中间点向四周方向拉伸一样。CSS3径向渐变不再像线性渐变那样沿着一条直线

HTML5学堂

2018/03/13

3.4K0

CSS渐变背景

.member-top { -webkit-animation:changeBg 20s infinite; -moz-animation:changeBg 20s infinite; animation:changeBg 20s infinite;background-color:#ED5564; background-image: url(member_top_bg.png); background-size: cover; text-align: center; width: 100%; height: 11rem; position: relative; z-index: 1;} @-webkit-keyframes changeBg{ 0%{background-color:#ED5564;} 10%{background-color:#FB6E52;} 20%{background-color:#FFCE55;} 30%{background-color:#A0D468;} 40%{background-color:#48CFAE;} 50%{background-color:#4FC0E8;} 60%{background-color:#5D9CEC;} 70%{background-color:#AC92ED;} 80%{background-color:#EC87BF;} 90%{background-color:#ED5564;} } @-moz-keyframes changeBg{ 0%{background-color:#ED5564;} 10%{background-color:#FB6E52;} 20%{background-color:#FFCE55;} 30%{background-color:#A0D468;} 40%{background-color:#48CFAE;} 50%{background-color:#4FC0E8;} 60%{background-color:#5D9CEC;} 70%{background-color:#AC92ED;} 80%{background-color:#EC87BF;} 90%{background-color:#ED5564;} } @keyframes changeBg{ 0%{background-color:#ED5564;} 10%{background-color:#FB6E52;} 20%{background-color:#FFCE55;} 30%{background-color:#A0D468;} 40%{background-color:#48CFAE;} 50%{background-color:#4FC0E8;} 60%{background-color:#5D9CEC;} 70%{background-color:#AC92ED;} 80%{background-color:#EC87BF;} 90%{background-color:#ED5564;} }

星宇大前端

2019/01/15

2.1K0

css 渐变背景_照片背景换成蓝色渐变

在我们自己设计网页的时候，为了好看美观，颜色可谓是最让人头疼的一部分。尤其是在配色上又找不到一些好看的网站。今天我就来记录一些好看的渐变式背景，和一些常用的颜色网站。

全栈程序员站长

2022/11/01

3.3K0

CSS3 线性渐变 linear-gradient的使用使用角度加透明度设置渐变

最近做页面的时候用到了线性渐变, linear-gradient 现在来总结一下用法回顾记录一下为一个元素设置渐变很简单

拿我格子衫来

2022/01/24

2.2K0

CSS3 线性渐变 linear-gradient的使用使用角度加透明度设置渐变

线性渐变：属性：linear-gradinet(开始位置角度，起始颜色，终止颜色 ) 开始位置：渐变开始的位置，属性值可以为百分比/长度/left、right、top、bottom（可组合使用）角度：渐变终止方向的角度，当开始位置为数值或百分比时候可用起始颜色...... 终止颜色...... 重复渐变将属性修改为：repeating-linear-gradinet()

用户3159471

2018/09/13

1.6K0

CSS实线边框渐变以及虚线边框渐变

给border-image加linear-gradient不难理解，但是如果单纯使用border-image，会发现效果是这样的：

javascript.shop

2019/09/04

8.6K0

CSS实线边框渐变以及虚线边框渐变

谈谈一些有趣的CSS题目（十三）-- 巧妙地制作背景色渐变动画！

开本系列，谈谈一些有趣的 CSS 题目，题目类型天马行空，想到什么说什么，不仅为了拓宽一下解决问题的思路，更涉及一些容易忽视的 CSS 细节。解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。不断更新，不断更新，不断更新，重要的事情说三遍。谈谈一些有趣的CSS题目（一）-- 左边竖条的实现方法谈谈一些有趣的CSS题目（二）-- 从条纹边框的实现谈盒子模型谈谈一些有趣的CSS题目（三）-- 层叠顺序与堆栈上下文知多少谈谈一些有趣的CSS题目

Sb_Coco

2018/05/28

1K0

【前端切图】CSS文字渐变和背景渐变

CSS属于前端里面最简单的东西，也是最基本的，但真正也没有多少人敢说自己精通CSS，因为其中的学问还是太多了，但作为前端工程师，每一次写出那些花里胡哨的炫酷界面的时候，都少不了这些的支持，因此，一定要好好打打牢基础。

王小婷

2019/06/14

2.2K0

css彩虹渐变文字[WebKit]

css webkit 测试浏览器内核

以前看到过彩虹文字，觉得挺好玩的，今天就去仿着弄了下。（其实和看到的那个差不多_(•̀ω•́ 」∠)_） css代码： <style type="text/css"> .rainbow{ background-image: -webkit-gradient(linear,left top,right top,color-stop(0,#f22),color-stop(0.15,#f2f),color-stop(0.3,#22f),color-stop(0.45,#2ff),color-stop(0.

用户8099761

2023/05/10

8130

CSS实现渐变字

渐变主要有三种类型：线性渐变( linear-gradient)、径向渐变( radial-gradient)、圆锥渐变( conic-gradient)

赤蓝紫

2023/01/05

1.3K0

渐变分线性渐变(linear-gradient)和径向渐变(radial-gradient);这里写的代码省去了-webkit-,-moz-,-o-这些前缀,使用的时候不要忘记.

用户2458785

2018/08/29

1.1K0

相似问题

CSS线性渐变边框

10

CSS线性渐变角

20

CSS边框-图像线性渐变

20

检查CSS线性渐变支持

22

覆盖线性渐变CSS属性

12

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例