CSS -- 实现DIV层背景颜色渐变 （兼容IE 火狐 谷歌浏览器）

最新推荐文章于 2023-07-17 15:13:25 发布
最新推荐文章于 2023-07-17 15:13:25 发布
阅读量2.4k 收藏
点赞数
分类专栏： CSS

CSS -- 实现DIV层背景颜色渐变 （兼容IE 火狐 谷歌浏览器）

FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,endColorStr=#f6f6f8);    /*IE*/

background:-moz-linear-gradient(top,#b8c4cb,#f6f6f8);/*火狐*/

background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#b8c4cb), to(#f6f6f8));/*谷歌*/

lego2816
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
html设计渐变背景,HTML网页设计之div渐变背景色
weixin_42528780的博客
06-28 6396
最近学到div背景渐变色，碰到一些小的点，这里收藏一下。写到渐变色之前，这里先在平时不注意的地方留一爪。(1)使body填充整个空间，而不是默认值：这里需要在css文件的最开头写一句：* {margin:0;padding:0}(2)去除table表中th之间会默认的留白：在table属性中，添加border-collapse：collapse(3)默认input type="submit" 的按...
div背景色渐变
yyz_suhua的博客
11-30 2918
举个例子，既然是要设置div渐变，所以我们就需要先使用一个div标签。 然后在header标签里面设置标签的css样式。 颜色渐变要有一个范围，所以小伙伴们需要给div设定width和height，也就是宽度和高度。 然后设定div的background背景属性，如图所示，背景颜色渐变就用到-webkit-linear-
CSS设置DIV背景色渐变显示
一切是我的成就感
12-16 619
.linear{            width:100%;            height:600px;            FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,endColorStr=#f6f6f8); /*IE 6 7 8*/
div背景颜色渐变
qq_42325246的博客
05-30 2549
div背景颜色怎样渐变 css实现div层背景颜色渐变代码葬魂军团o蚴 | 浏览 14062 次 |举报我有更好的答案2017-01-15最佳答案CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。CSS3 定义了两种类型的渐变（gradients）：线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向与径向渐变（Radial Grad...
渐变属性(background-image)全解析
qq_45799465的博客
01-25 5217
背景图线性渐变 线性渐变 background-image:linear-gradient(red,blue); 默认是从上往下渐变。 background-image:linear-gradient(to 方向词,red,blue); background-image:带CSS3浏览器前缀-linear-gradient( 方向词,red,blue); 可以设置渐变方向：从上往下，从下往上，从左往右，从右往左。 background-image:l.
html div背景颜色渐变
java小白白之没有最白的博客
08-25 1万+
div部分 <div class="tag_cutover"> </div> css部分 .tag_cutover{ width: 100px; heigh: 100px; FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr= #2064d0,endColorStr=#070e42); /*IE 6 7 8*/ background: -ms-linea
CSS设置DIV背景色渐变显示兼容IE/火狐/谷歌
09-25
标题中的“CSS设置DIV背景色渐变显示兼容IE/火狐/谷歌”指的是在网页设计中，使用CSS来实现一个DIV元素的背景颜色渐变效果，并确保这种效果在不同的浏览器，包括Internet Explorer（IE）、Firefox和Google Chrome...
div背景颜色怎样渐变 css实现div层背景颜色渐变代码
09-25
本篇文章将详细介绍如何通过CSS代码实现div层背景颜色的渐变。 首先，我们来解析一下给定的代码片段。这段代码创建了一个简单的HTML页面，并在其中应用了CSS样式来实现背景颜色渐变。在`<head>`部分，有一个`...
CSS滤镜实现的颜色渐变翻转效果
09-25
在本文中，我们将深入探讨如何使用CSS滤镜实现颜色渐变翻转效果。CSS滤镜是一种强大的工具，它可以改变元素的视觉表现，包括颜色、对比度、模糊度等。在本例中，我们将重点讨论`transform`和`transition`属性，这两...
html中div背景颜色渐变(透明 对角 附赠颜色查询对照表)
existent
06-02 6693
效果图 源码 <style> #grad1 { height: 200px; background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); } </style> <div id="grad1"> </div> 使用角度: 如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to r
css实现渐变色
心若向阳 无谓悲伤
10-15 1万+
日常中最常用到的渐变色是背景和边框(一条线的渐变色可以考虑使用div，然后根据需求设置高度)两种 首先来了解一下绘制渐变色的角度与方向 第一种：背景 使用到的属性为background，接下来看三个关于背景渐变最常用到的实例(有详细注释，方便理解；设置渐变色的角度可以根据需求进行相应的修改；设置渐变色的颜色参数可根据自己的需求进行相应的增删) 1.背景的横向渐变(渐变的方向由左到右)：...
颜色渐变：容器背景从中间向右逐渐透明的效果
最新发布
bingmoujs的博客
07-17 399
以上代码将容器的宽度设置为500像素，高度设置为200像素，并且创建了一个水平渐变背景。要实现容器背景从中间向右逐渐透明的效果，您可以使用CSS来设置容器的背景。渐变从50%处开始，即中间位置，逐渐向右边透明。表示白色完全不透明，
设置div的背景色--颜色渐变
zlq_CSDN的博客
12-07 9724
background: linear-gradient(to right（左右到右，写为bottom就是从上到下）, 开始的颜色,结束的颜色);
CSS实现网页背景颜色渐变的效果。
拓
06-18 2740
 来自：http://hi.baidu.com/%EC%BD%EC%BB%C2%FB%D1%D3/blog/item/28faf601af300ffe08fa939a.html 为了显示一个渐变而专门制作一个图片的做法是不灵活的，而且很快会成为一种不好的做法。但是遗憾的是，截至写这篇文章，可能还必须这样做，但是希望不会持续太久。多亏Firefox 和Safari/Chrome，我们现在
兼容ie 和谷歌等浏览器的渐变背景色写法
u013558123的博客
01-25 513
兼容ie 和谷歌等浏览器的渐变背景色写法
CSS3 火狐和谷歌浏览器中的颜色渐变
离殇葬天的专栏
11-02 1220
css3增加了背景颜色渐变功能。 background:-webkit-gradient(linear, 0 0, 0 bottom, from(#78fdf8), to(#f2fcbd)); 这个是基于webkit内核(chrome)的渐变背景设置。 第一个参数linear：是渐变的类型，linear是指线性渐变。 第二个参数0 0：起始位置的横坐标和纵坐标，可以是 像素、百分比、top
火狐浏览器适用的 CSS简单的渐变背景
weixin_34055910的博客
04-24 114
background:-moz-linear-gradient(left,#3992D0,rgba(227,157,168,0.5));从左到右第一个参数写left；从上到下则写top；第二个参数是渐变开始的颜色；第三个参数是渐变结束的颜色和透明度。所谓rgba：R：红色值。正整数 | 百分数G：绿色值。正整数 | 百分数B：蓝色值。正整数 | 百分数A：Alph...
使用css实现渐变色背景
热门推荐
最酷最可爱的博客
11-08 3万+
渐变方式 线性渐变 放射性渐变 线性渐变 linear-gradient(to bottom,colorStrat,colorEnd) 第一个参数指定 渐变的方向 to bottom 从上至下 to bottom right 从左上至右下 to right 从左至右 to up right 从左下至右上 to up 从下至下 to
ie不兼容css3 渐变色,CSS3兼容IE、Safari、Firefox背景颜色渐变
05-25
是的，IE浏览器不支持CSS3中的渐变色，但可以使用IE滤镜来实现类似的效果。以下是一个使用CSS3和IE滤镜来实现渐变色的示例： ```css /* CSS3 */ background: linear-gradient(to bottom, #ff0000, #0000ff); /* IE滤镜 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#0000ff', GradientType=0); ``` 这里使用了CSS3中的线性渐变，从红色渐变到蓝色。同时，使用IE滤镜来实现相同的效果，其中 `startColorstr` 和 `endColorstr` 分别指定起始和结束颜色，`GradientType` 指定渐变类型为0（表示水平渐变）。这样就能在IE浏览器中实现类似的效果了。另外，Safari和Firefox等现代浏览器都支持CSS3中的渐变色。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值