网页背景色渐变效果

最新推荐文章于 2024-04-20 20:01:08 发布
最新推荐文章于 2024-04-20 20:01:08 发布
阅读量1.1w 收藏 8
点赞数 1
分类专栏： 01 Html 文章标签： filter c 
背景色渐变:
<body style="FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ffffff',EndColorStr='#00ff00')">

参数说明:

GradientType为渐变类型，0为上下渐变，1为左右渐变

StartColorStr为开始颜色

EndColorStr为结束颜色

背景色透明:
<body style="FILTER: progid:DXImageTransform.Microsoft.Alpha(

style=1,opacity=25,finishOpacity=100,startX=50,finishX=100,startY=50,finishY=100); BACKGROUND-COLOR:

skyblue">

 背景图渐变:
<img src="" width=400 height=300 style="FILTER: progid:DXImageTransform.Microsoft.Alpha(

style=1,opacity=25,finishOpacity=100,startX=50,finishX=100,startY=50,finishY=100)">


具体颜色如下： 

01 白色 #FFFFFF          18 红色 #FF0000                35 绿色 #00FF00    

02 牡丹红 #FF00FF        19 青色 #00FFFF                36 黄色 #FFFF00    

03 海蓝 #70DB93          20 巧克力色 #5C3317            37 蓝紫色 #9F5F9F     

04 黄铜色 #B5A642        21 亮金色 #D9D919              38 棕色 #A67D3D    

05 青铜色 #8C7853        22 2号青铜色 #A67D3D           39 士官服蓝色 #5F9F9F 

06 冷铜色 #D98719        23 铜色 #B87333                40 珊瑚红 #FF7F00   

07 紫蓝色 #42426F        24 深棕 #5C4033                41 深绿 #2F4F2F 

08 深铜绿色 #4A766E      25 深橄榄绿 #4F4F2F            42 深兰花色 #9932CD 

09 深紫色 #871F78        26 深石板蓝 #6B238E            43 深铅灰色 #2F4F4F   

10 深棕褐色 #97694F      27 深绿松石色 #7093DB          44 暗木色 #855E42  

11 淡灰色 #545454        28 土灰玫瑰红色#856363         45 长石色 #D19275      

12 火砖色 #8E2323        29 森林绿 #238E23              46 金色 #CD7F32       

13 鲜黄色 #DBDB70        30 灰色 #C0C0C0                47 铜绿色 #527F76     

14 青黄色 #93DB70        31 猎人绿 #215E21              48 印度红 #4E2F2F  

15 土黄色 #9F9F5F        32 浅蓝色 #C0D9D9              49 浅灰色 #A8A8A8      

16 浅钢蓝色 #8F8FBD      33 浅木色 #E9C2A6              50 石灰绿色 #32CD32   

17 桔黄色 #E47833        34 褐红色 #8E236B              51 蓝色 #0000FF

passport_daizi
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
网页的背景颜色变化效果
weixin_52255310的博客
01-31 580
文章目录前言一、背景线性渐变二、媒体查询背景变色1.实现思路2.具体语法总结 前言 学习背景颜色的渐变和媒体查询是的背景颜色变化丰富网页的呈现效果。 一、背景线性渐变 呈现效果 语法 background: linear-gradient(起始方向，颜色1，颜色2，......); background: -webkit-linear-gradient(left, red, blue); background: -webkit-linear-gradient(top left, red, bl..
渐变背景效果
u012491775的专栏
05-02 604
点击开始按钮实现背景颜色的渐变 ，点击停止背景变为黑色         背景渐变效果             var color = 999999;         var woot = 0;         function stopLoop(){             document.bgColor = '#000000';          
HTML/CSS设置网页背景
夏日漱石的博客
03-12 2万+
HTML/CSS设置网页背景
Html定义网页背景色
为了梦，爱一生
11-29 2万+
对大多数浏览器而言，其默认的背景颜色为白色或灰白色。在网页设计中，bgcolor属性用于设置整个网页的背景颜色。 基本语法： 背景颜色有两种表示方式。 使用颜色名指定，例如红色、绿色等分别用red、green等表示。使用十六进制格式数据值#RRGGBB来表示，RR、GG、BB分别表示颜色中的红、绿、蓝三基色的两位十六进制数据。 实例代码： 定义
渐变效果-gradient（秒懂网页中的渐变效果）
最新发布
百赢出品，必属精品
04-20 1142
CSS渐变是指在HTML元素上应用的平滑过渡效果，通常用于创建颜色或透明度上的渐变。渐变可以是线性的（沿着一条直线方向）、径向的（从一个中心点向外辐射）、角向的（沿着角度方向）、重复的等等。渐变是一种在CSS中用于创建平滑过渡效果的技术，通过在不同颜色之间进行过渡，可以实现丰富多彩的背景、文本和边框效果。线性渐变（linear-gradient）通过定义渐变的方向和颜色起止点，实现沿着一条直线方向的颜色过渡效果。可以指定角度、方向关键字（top、right、bottom、left）或者自定义方向。
CSS背景属性之颜色渐变
LuoYi_ly_的博客
10-25 6万+
这样的设计解决方案并不是只可以使用颜色渐变，我们可以使用两个div拼接，将文字放置两个div中间，但是有颜色渐变的话，我们就不需要那么复杂的解决。红色 ，黄色 ，绿色三色在0-100之间依照顺序有过渡的变化。0为红色，0-50为红色到黄色渐变， 100黄色。这里的 to top是默认的值，颜色渐变会从上而下由黄色到绿色有过渡渐变。下面两张效果图，前者是to right，后者是to left。效果图如下，左边是没有角度的，右边是45deg的。颜色渐变可以分为两种，线性渐变和径向渐变。...
HTML CSS中设置背景颜色渐变色 线性渐变与径向渐变 gradient知识总结
shaoyahu的博客
04-21 1万+
线性渐变与径向渐变 gradient知识总结
css linear-gradient 设置背景颜色渐变
且听风吟的博客
08-12 2万+
CSS3 渐变能够让背景颜色在两个或多个颜色之间平滑过渡。
一种表格背景色渐变效果的实现
10-31
在网页设计中，实现表格背景色渐变效果是一种常见的需求。通过 CSS 和 JavaScript 的结合，可以实现这个效果。在下面，我们将对实现表格背景色渐变效果的技术细节进行详细的解释。 背景色渐变效果的实现 首先，...
网页背景渐变效果代码
12-11
下面是我从网上搜索下来的关于网页的背景色从上下到由蓝色到白色的渐变的代码，但其中的一些参数我不懂，我琢磨不透如果要由下至上的渐变效果到底是修改哪个参数，我试过修改gradientType的值，但没能实现从下到上的...
通过CSS样式实现的html背景色渐变效果
09-28
HTML中的背景色渐变可以通过CSS样式来实现，这是一种让元素背景颜色从一种色彩平滑过渡到另一种色彩的技术，为网页设计增添动态感和视觉吸引力。本文将详细介绍如何使用CSS实现背景色渐变，并提供一个实际的示例代码...
15种网页清爽颜色
02-25
15种网站清爽背景色,解决网页制作时背景颜色选择难的问题
div背景颜色怎样渐变 css实现div层背景颜色渐变代码
09-25
在CSS中，实现div背景颜色渐变是一种常见的视觉效果，可以使网页元素看起来更加现代和吸引人。本篇文章将详细介绍如何通过CSS代码实现div层背景颜色的渐变。 首先，我们来解析一下给定的代码片段。这段代码创建了一...
用网页技术CSS实现网页背景渐变的四种代码设置
09-25
网页背景渐变是指在网页设计中，使用CSS技术实现网页背景颜色的渐变效果，从而提高网页的视觉效果和用户体验。下面将介绍四种使用CSS实现网页背景渐变的代码设置。 一、从上往下渐变 使用CSS的FILTER属性实现从上...
通过使用html的css样式来达到给背景色添加渐变色的效果
小杨的博客
07-13 8633
html设置颜色渐变的方法：首先创建一个HTML示例文件；然后使用div标签创建一个模块；接着在css标签内通过“id(colorchange)”来设置div样式；最后通过linear-gradient属性设置div，在前端网页开发的时候，往往会用到一些渐变色的效果，这样可以使得前端页面更加美观。那么这些渐变效果是如何用css代码实现出来的？本章就给大家带来css如何实现渐变效果？ 第一份案例图及所需要求展示： 构思： 首先为整体设置个盒子，清除整体的浮动。整体宽750px，高480px，图片可以用back
css设置背景颜色渐变
vfjcgg的博客
05-16 3万+
对角线渐变： background: linear-gradient(to top right, #f6f5f0, #fefefd); 如果有多个颜色渐变，颜色的参数可以有多个： background: linear-gradient(to top right, #CDDC39, #8BC34A, #FFEB3B); 可以指定颜色渐变的位置： background: linear-gradient(to top right, #CDDC39 0%, #8BC34A 25%, #FFEB3B 100%);
Html中背景色之颜色渐变
热门推荐
SpringWalker
11-23 6万+
颜色渐变:   原理:以水平中心开始顺时针画圆     1.颜色渐变分为水平渐变与放射性渐变     线性渐变：       写法一：background：liner-gradient(red,black)【表示颜色从上往下，从红到绿转换，各占50% （默认）】                   写法二：liner-gradient(to right,red，green)【表
HTML——背景、渐变
zx2014567296的博客
06-21 5839
第一份案例图及所需要求展示： 构思： 首先为整体设置个盒子，清除整体的浮动。整体宽750px，高480px，图片可以用backgrou-image设置为背景图片；由于图片的宽高与盒子的宽高一致，因此无需设置backgroud-repeat背景图的平铺。 标题h2与顶部要有60px的空隙，就要用到padding-top上内边距的样式设置。（复习：padding定义内边距时，必须按照顺时针赋值，一个值为4个边；两个值为上下/左右；三个值为上/左右/下） 内容要求显示时不透明度为0.3，需要使用opacity，
css实现盒子背景颜色渐变（一文读懂背景颜色渐变）
m0_47791238的博客
07-15 6721
要实现盒子背景颜色的渐变效果，常见的一般有三种， 线性渐变（linear gradient）、重复线性渐变（repeating-linear-gradient）、径向渐变（radial-gradient），下面是三种场景示例：
h5网页背景图渐变动画
04-06
以下是一个使用CSS实现的h5网页背景图渐变动画示例： HTML代码： ``` <div class="bg"></div> ``` CSS代码： ``` .bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image:...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值