支持三大浏览器的背景渐变

最新推荐文章于 2024-04-15 14:55:08 发布
最新推荐文章于 2024-04-15 14:55:08 发布
阅读量339 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40101922/article/details/81099382
版权

css：

.gradual{

width: 600px;

height: 30px;

background-image:-webkit-linear-gradient(left, rgba(255,255,255,.1) 0%, rgba(121, 121, 121, 1) 50%,rgba(255,255,255,.1) 100%);

background-image:-webkit-o-gradient(left, rgba(255,255,255,.1) 0%, rgba(121, 121, 121, 1) 50%,rgba(255,255,255,.1) 100%);

background-image:-moz-linear-gradient(left, rgba(255,255,255,.1) 0%, rgba(121, 121, 121, 1) 50%,rgba(255,255,255,.1) 100%);

}

html结构：

<div class="gradual"></div>

Lucy酱
关注
专栏目录
css3编写浏览器背景渐变背景色的方法
09-24
【CSS3 编写浏览器背景渐变背景色的方法】 在CSS3中，我们可以利用多种方式创建背景色渐变效果，让网页元素的背景颜色平滑过渡。这些方法不仅增加了视觉吸引力，还可以帮助设计师创造出独特的界面风格。下面我们将...
渐变属性(background-image)全解析
qq_45799465的博客
01-25 5387
背景图线性渐变 线性渐变 background-image:linear-gradient(red,blue); 默认是从上往下渐变。 background-image:linear-gradient(to 方向词,red,blue); background-image:带CSS3浏览器前缀-linear-gradient( 方向词,red,blue); 可以设置渐变方向：从上往下，从下往上，从左往右，从右往左。 background-image:l.
【CSS】渐变背景（background-image）
qq_45768871的博客
03-27 6010
文章目录【CSS】渐变背景（background-image）1.线性渐变1.1 CSS代码2.色标2.1 添加色标3.IE的支持程度4. 平铺的线性渐变5.径向渐变5.1设置径向渐变的中心点6.色标6.1IE的兼容性7. 平铺的径向渐变8. 后记 【CSS】渐变背景（background-image） 以前，我们要实现这种渐变，可能要用 Photoshop 或 Fireworks 创建一个渐...
background-image
weixin_34202952的博客
12-26 142
  CreateTime--2017年12月26日14:51:21 Author:Marydon background-image 1.background-image:url() 作用：设置背景图片 语法： background-image:url(path) 说明： 　　path既可以是相对路径又可以是绝对路径，不需要添加单引号，即url('path') 2.b...
关于CSS中background相关知识
u012032178的博客
06-30 556
css中background-image与background-size相关用法
浅谈【CSS】渐变背景（background-image）以及基础用法
前端起步博客
12-26 6337
线性渐变 background-image: linear-gradient( 角度 , 颜色); 线性渐变是最基本的渐变类型。这种渐变在一条直线上从一个颜色过渡到另一个颜色。 ####background-image: linear-gradient( #E94E65, #1574A8); 这条直线的方向由角度指定，或者在关键字 to 后面加上 top、bottom、right、left 中的...
兼容当前五大浏览器的渐变颜色背景gradient的写法
09-25
为了确保渐变颜色背景能够在当前五大浏览器中正常显示，我们需要考虑到不同浏览器的支持情况，并编写相应的CSS代码来实现兼容性。渐变背景相较于传统的长条图片更为高效和美观，但需要考虑旧版本浏览器的兼容问题。...
css 各浏览器下的背景色渐变【代码】
09-24
首先，让我们了解一下不同浏览器对CSS背景色渐变的支持情况。在早期，各大浏览器（如IE、Firefox、Chrome、Safari和Opera）都有自己的私有语法来实现这一功能，导致开发者需要编写不同的代码以兼容各个浏览器。随着...
CSS之背景的设置 (六)：background-(image、repeat、size、position、attachment)、background、background-image和img对比
Good Good Study,Day Day Up!
05-16 2046
用于设置元素的背景图片。
background-image渐变详解
最新发布
时光清浅处，一步一安然
04-15 1810
属性不仅可以用来设置背景图片，还可以用于创建线性渐变（linear gradients）和径向渐变（radial gradients）背景。这个例子创建了一个从中心向外扩展的圆形径向渐变，起始颜色为红色，中间转为半透明黑色，最外圈为蓝色。线性渐变是从起点到终点沿着一条直线逐渐过渡的一种颜色或透明度的变化。这将创建一个从左到右的渐变，开始为红色，到达一半时变为黄色，剩余部分为绿色。径向渐变是从一个中心点向外围扩散的颜色或透明度的变化。
7个实用的CSS background-image小技巧
qq_43067585的博客
11-03 7667
（推荐教程：CSS教程） background-image可能是我们所有人（前端开发人员）在我们的职业生涯中至少使用过几次的CSS属性之一。大多数人认为背景图像没有什么不寻常的，但经过研究，答案并非如此。 所以本文收集了7个我认为最有用的技巧，并创建了一些代码示例，你可以在其中查看正在发生的事情。 1、将背景图像完美适配视口 让我们从比技巧更技巧的地方开始。 有多少次你不得不与你的背景图像斗争，以使其完美契合且又没有拉伸感和吸引力的情况？ 这里向你展示如何使你的背景图片始终完全适合浏览器窗口！..
CSS background-image属性
热门推荐
小阳的博客
12-08 4万+
但凡牛掰人物出场，都伴随着“Duang”的特技，它们会不停的加特技，加特技，加特技。CSS背景图片的background-image就是这样一位牛人，它一登场肯定也会加“特技”。下面我们来看看它的“特技”；background-image属性值模式background-image的属性值模式就是用来给它加“特技”的。它的值模式有： url()模式 linear-gradient()模式 repeat
background-image的特殊用法
weixin_45990047的博客
11-09 3400
@[TOC]background-image用法及介绍 background-imagebackground-image二级目录三级目录新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 background-image 二级
背景渐变色，兼容IE
hulufeng1203的专栏
10-28 1352
/* * -webkit-gradient: 第一个参数：表示的是渐变的类型:linear线性渐变 第二个参数：分别对应x，y方向渐变的起始位置 第三个参数：分别对应x，y方向渐变的终止位置 第四个参数：设置了起始位置的颜色 第五个参数：设置了终止位置的颜色 -moz-linear-gradient: 第一个参数：设置渐变的起始位置 第二个参数：设置起始位置的颜色 第三个参数：设置终止位置的颜色
背景的设置、渐变和雪碧图
l15655495902的博客
03-10 555
（1）circle圆形，ellipse椭圆，1 将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，2 将多个图片整合为一张图片，减小了图片的总大小，提高请求的速度，增加了用户体验。参数1:表示方位，（可选值，不写默认是to bottom）渐变：通过渐变可以设置一些复杂的背景颜色，可以从实现一个颜色向其他颜色过渡的效果。默认情况下，圆心是根据元素的形状来计算的。border-box 默认值，背景颜色会出现在边框的下边。可以写多个颜色，默认情况下，颜色是均分占比的。
ie不兼容css3 渐变色,兼容IE与firefox的css 线性渐变（linear-gradient）
weixin_30707165的博客
08-04 431
现行渐变首先看下示例(1)垂直渐变(2)垂直渐变IE系列filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='0');参数：startColorStr起始颜色 endColorStr结束颜色 gradientType为0时代表垂直，...
前端background笔记
2201_75867247的博客
12-10 165
由它们的中心定义：background-image: radial-gradient(形状 大小 at position, 颜色, …（2）background-image: linear-gradient(角度deg, 颜色, 颜色, …（1）background-image: linear-gradient(方向, 颜色, 颜色, …大小：farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角。（2）repeat-X ,repeat-Y 根据X和Y轴重复。
【黑马前端—CSS基础】背景
学习如逆水行舟，不进则退
08-30 1060
内容来自b站的黑马程序员pink老师 由我收集整理 总结 CSS 的背景 通过 CSS 背景属性，可以给页面元素添加背景样式。 背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。 背景颜色 background-color 属性定义了元素的背景颜色。 background-color:颜色值; 一般情况下元素背景颜色默认值是 transparent（透明），我们也可以手动指定背景颜色为透明色 background-color:transparent; 背景图片 backgro
CSS background-image背景图片相关介绍
weixin_34212762的博客
12-05 784
这里将会介绍如何通过background-image设置背景图片，以及背景图片的平铺、拉伸、偏移、设置大小等操作。   1. 背景图片样式分类 CSS中设置元素背景图片及其背景图片样式的属性主要以下几个： background-image ：设置元素的背景图片。 background-repeat ：设置如何平铺背景图片。 background-attachment ：设置背景图片是否...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值