文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
返回腾讯云官网
社区首页 >问答首页 >CSS渐变中的抖动

问CSS渐变中的抖动
EN

Stack Overflow用户
提问于 2014-09-08 04:22:27
回答 1查看 2.4K关注 0票数 0

我在一个横跨浏览器的网站上使用CSS渐变。不幸的是，您可以看到条带。

我知道在Photoshop这样的图形程序中，你可以对渐变应用抖动，从而平滑渐变。

有没有什么方法可以使用额外的CSS或Javascript将抖动应用到CSS渐变？

css
gradient
EN

回答 1

Stack Overflow用户

发布于 2014-09-08 04:29:03

此时，您应该更喜欢背景图像而不是css渐变。仍然有很多IE版本的用户不能做到这一点，或者不能正确做到这一点。这也将使您能够解决您的条带问题- css不支持抖动/渐变抗锯齿。

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

https://stackoverflow.com/questions/25717416

复制
相关文章
css抖动特效
gif
抖动.gif <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link href="./style.css" rel="stylesheet">
用户4344670
2020/03/26
2.1K0
纯css抖动效果
其他
HTML： 1 <button class="shake">按钮</button> CSS： 1 .shake{ 2 width: 120px; 3 height: 33px; 4 border-radius: 66px; 5 background-color: #00ff00; 6 border: 0; 7 color: #fff; 8 font-weight: bold; 9 } 10 /* shake 按钮抖
ProsperLee
2018/10/24
3.9K0
纯css抖动效果
CSS3 渐变 — 径向渐变
html5css
HTML5学堂（码匠）：有了解上周CSS3线性渐变的大家想必能很快掌握CSS3的径向渐变，两者的实现方法大同小异，但CSS3的径向渐变比线性渐变稍微复杂些，颜色不再沿着一条直线轴变化，而是从一个起点朝所有方向混合，属性参数也繁多复杂，不过别担心，下面会为大家详细介绍。 本文主要内容 1. 径向渐变简介 2. 径向渐变属性与参数 3. 径向渐变基本用法 1、径向渐变简介 CSS3径向渐变，是一种从起点到终点颜色从内到外进行圆形渐变，就像从中间点向四周方向拉伸一样。CSS3径向渐变不再像线性渐变那样沿着一条直线
HTML5学堂
2018/03/13
3.4K0
CSS3 渐变 — 径向渐变
CSS渐变背景
csshtml
.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 渐变背景_照片背景换成蓝色渐变
css网站
在我们自己设计网页的时候，为了好看美观，颜色可谓是最让人头疼的一部分。尤其是在配色上又找不到一些好看的网站。今天我就来记录一些好看的渐变式背景，和一些常用的颜色网站。
全栈程序员站长
2022/11/01
3.3K0
css3渐变
其他
线性渐变： 属性：linear-gradinet(开始位置 角度，起始颜色，终止颜色 ) 开始位置：渐变开始的位置，属性值可以为百分比/长度/left、right、top、bottom（可组合使用） 角度：渐变终止方向的角度，当开始位置为数值或百分比时候可用 起始颜色...... 终止颜色...... 重复渐变将属性修改为：repeating-linear-gradinet()
用户3159471
2018/09/13
1.6K0
CSS实线边框渐变以及虚线边框渐变
php
给border-image加linear-gradient不难理解，但是如果单纯使用border-image，会发现效果是这样的：
javascript.shop
2019/09/04
8.6K0
CSS实线边框渐变以及虚线边框渐变
【前端切图】CSS文字渐变和背景渐变
网站css
CSS属于前端里面最简单的东西，也是最基本的，但真正也没有多少人敢说自己精通CSS，因为其中的学问还是太多了，但作为前端工程师，每一次写出那些花里胡哨的炫酷界面的时候，都少不了这些的支持，因此，一定要好好打打牢基础。
王小婷
2019/06/14
2.2K0
css彩虹渐变文字[WebKit]
csswebkit测试浏览器内核
以前看到过彩虹文字，觉得挺好玩的，今天就去仿着弄了下。（其实和看到的那个差不多_(•̀ω•́ 」∠)_） 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
8150
CSS实现渐变字
csshtml
渐变主要有三种类型：线性渐变( linear-gradient)、径向渐变( radial-gradient)、圆锥渐变( conic-gradient)
赤蓝紫
2023/01/05
1.3K0
CSS实现渐变字
CSS 03 线性渐变、径向渐变与重复性渐变
css
linear-gradient( [ || ,]? , [,]* ) < angle >:用角度指定渐变方向或者角度 to left to right to top to bottom .ceng{
卢衍飞
2023/02/13
1.6K0
css3 渐变
其他
渐变分线性渐变(linear-gradient)和径向渐变(radial-gradient);这里写的代码省去了-webkit-,-moz-,-o-这些前缀,使用的时候不要忘记.
用户2458785
2018/08/29
1.1K0
css3 渐变
css渐变实现杂色
css编程算法
思路出处：https://css-tricks.com/making-static-noise-from-a-weird-css-gradient-bug/
阿超
2023/01/05
1K0
css渐变实现杂色
css3颜色渐变_灰色渐变图片
csshtmlhttps网络安全
*{margin:0;padding:0}.words{font-size:25px;font-weight:700;text-align:center;margin:20px 0}div{width:300px;height:150px;margin:0 auto 10px;border:1px solid #ddd;
全栈程序员站长
2022/11/17
2.3K0
css实现文字颜色渐变
htmlsvg
background: -webkit-linear-gradient(…) 为文本元素提供渐变背景。 webkit-text-fill-color: transparent 使用透明颜色填充文本。 webkit-background-clip: text 用文本剪辑背景，用渐变背景作为颜色填充文本。
javascript.shop
2019/09/04
3.5K0
Css渐变与斑马条纹
backgroundgradientsize
渐变函数linear-gradient，通过linear-gradient创建的背景可以通过background-size控制。
wade
2020/04/24
1.7K0
Css渐变与斑马条纹
CSS3中元素背景的 gradient 渐变属性
css
前段时间我写过一篇：CSS中background属性总结 整理了background的常用属性。
德顺
2019/11/13
1.4K0
CSS-背景渐变的兼容写法
其他
background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%); background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%); background-image: -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%);
xing.org1^
2018/05/17
1.7K0
CSS 渐变锯齿消失术
css
有意思的是，锯齿现象在 DPR 为 1 的屏幕下特别明显，而在一些高清屏（dpr > 1）的屏幕下，感受不会那么明显。
Sb_Coco
2022/11/07
1.6K0
CSS 渐变锯齿消失术
css3 gradient 渐变
其他
分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。 1.线性渐变在Mozilla 下应用 　　语法：-moz-linear-gradient( [<p
用户1197315
2018/01/19
6730

相似问题

UIButton边框中的抖动渐变

10

CSS抖动/抖动效果

214

在MATLAB中显示渐变图像的抖动图

13

渐变内的CSS渐变

20

CSS中的渐变

16
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文