html背景位置渐变,CSS3(背景和渐变)
CSS3
1.背景
1.1背景图像区域(background-clip)
语法
background-clip:border-box;
值
值
意
border-box
背景被裁剪到边框
padding-box
背景被裁剪到内边距
content-box
边框被裁剪到内容
1.2背景图像定位(background-origin)
语法
background-origin:border-box;
值
值
意
border-box
边框处起定位
padding-box
内边距处起定位
content-box
内容处起定位
配合前篇中的css背景中的1.5.
1.3背景图像大小(background-size)
语法
有两个值,写一个值第二个值自动auto
background-origin:100%;
值
意
1px
数值
100%
%
cover
缩放多余裁剪。如何裁剪取决定位。
contain
缩放不裁剪,图片全显示。
1.3多重背景图像
语法
background-image:url(),url();
英文状态下逗号隔开,谁在前谁显示再前。
1.4 简写
语法顺序
background:颜色 位置 尺寸 填充样式 定位 从哪裁剪 图片状态 图片地址;
background:color position size repeat origin clip attachment image;
background:#f00 center 50% no-repeat content-box content-box fixef url();
2.渐变
2.1 线性渐变(linear-gradient(方向,颜色,颜色);)
2.1.1上下渐变
语法
background:-webkit-linear-gradient(#f00,#00f);
background: -moz-linear-gradient(#f00,#00f);
background: -o-linear-gradient(#f00,#00f);
background: linear-gradient(#f00,#00f);
不用写方向直接写颜色就行,颜色可是多个值。
2.1.2左右渐变
语法
background:-webkit-linear-gradient( left#f00,#00f);
background: -moz-linear-gradient( right,#f00,#00f);
background: -o-linear-gradient( right,#f00,#00f);
background: linear-gradient(to right,#f00,#00f);
兼容问题,不同内核不同写法
2.1.3对角渐变
语法(如:左上到右下的写法)
background:-webkit-linear-gradient( left top,#f00,#00f);
background: -moz-linear-gradient( right bottom,#f00,#00f);
background: -o-linear-gradient( right bottom ,#f00,#00f);
background: linear-gradient(to right bottom,#f00,#00f);
2.1.4角度渐变
语法
background:-webkit-linear-gradient( 45deg,#f00,#00f);
background: -moz-linear-gradient( 45deg,#f00,#00f);
background: -o-linear-gradient( 45deg,#f00,#00f);
background: linear-gradient( 45deg,#f00,#00f);
官方:
0deg 从下向上
90deg 从左向右
180deg 从上向下
-90deg 从右向左
webkit:
0deg 从左向右
90deg 从下向上
180deg 从右向左
-90deg 从上向下
== 带有内核的写到前面,默认写在后边,解决问题。==
2.1.5渐变色节点控制
语法
background:-webkit-linear-gradient( 45deg,#f00 10%,#00f 20%,#0f0);
background: -moz-linear-gradient( 45deg,#f00 10%,#00f 20%,#0f0);
background: -o-linear-gradient( 45deg,#f00 10%,#00f 20%,#0f0);
background: linear-gradient( 45deg,#f00 10%,#00f 20%,#0f0);
第一个颜色值不写节点度默认0%,最后一个则是100%
2.1.6渐变色透明度
语法
background:-webkit-linear-gradient( 45deg,#f00,#f000);
background: -moz-linear-gradient( 45deg,#f00,#f000);
background: -o-linear-gradient( 45deg,#f00,#f000);
background: linear-gradient( 45deg,#f00,#f000);
我们可以用rgba的值来写,第一种 rgba(255,255,255,1) 第二种 #FFFF
2.1.7重复渐变(repeating-linear-gradient();)
语法
background:-webkit-repeating-linear-gradient( 45deg,#f00 0%,#f000 20%);
background: -moz-repeating-linear-gradient( 45deg,#f00 0%,#f000 20%);
background: -o-repeating-linear-gradient( 45deg,#f00 0%,#f000 20%);
background: repeating-linear-gradient( 45deg,#f00 0%,#f000 20%);
重复多少遍 取决最后一个百分比
2.2径向(半径)渐变(radial-gradient(颜色颜色);)
从内向外渐变
2.2.1渐变基本语法
语法
background:-webkit-radial-gradient(#f00 10%,#00f 50%);
background: -moz-radial-gradient(#f00 10%,#0f 50%);
background: -o-radial-gradient(#f00 10%,#00f 50%);
background: radial-gradient(#f00 10%,#00f 50%);
这里面的%是中心点到边界的长度%
2.2.2渐变的形状
语法
background:-webkit-radial-gradient(circle,#f00 10%,#00f 50%);
background: -moz-radial-gradient(circle,#f00 10%,#0f 50%);
background: -o-radial-gradient(circle,#f00 10%,#00f 50%);
background: radial-gradient(circle,#f00 10%,#00f 50%);
只有两个形状 圆(circle)和椭圆(ellipse),椭圆是默认值
2.2.3渐变的尺寸( 值%看那个边或角)
语法
background:-webkit-radial-gradient(closest-side circle,#f00 10%,#00f 50%);
background: -moz-radial-gradient(closest-side circle,#f00 10%,#0f 50%);
background: -o-radial-gradient(closest-side circle,#f00 10%,#00f 50%);
background: radial-gradient(closest-side circle,#f00 10%,#00f 50%);
值
意
closest-side
最近边
farthest-side
最远边
closest-corner
最近角
farthest-corner
最远角
形状和尺寸是一个属性
2.2.4渐变的中心位置
语法
background:-webkit-radial-gradient(50% 30%,closest-side circle,#f00 10%,#00f 50%);
background: -moz-radial-gradient(50% 30%,closest-side circle,#f00 10%,#0f 50%);
background: -o-radial-gradient(50% 30%,closest-side circle,#f00 10%,#00f 50%);
background: radial-gradient(50% 30%,closest-side circle,#f00 10%,#00f 50%);
第一个值左30% 第二个值上50%
2.2.5重复渐变( repeating-radial-gradient)
语法*
background:-webkit-repeating-radial-gradient(50% 30%,closest-side circle,#f00 10%,#00f 50%);
background: -moz-repeating-radial-gradient(50% 30%,closest-side circle,#f00 10%,#0f 50%);
background: -o-repeating-radial-gradient(50% 30%,closest-side circle,#f00 10%,#00f 50%);
background: repeating-radial-gradient(50% 30%,closest-side circle,#f00 10%,#00f 50%);
2.3 IE6-IE8渐变(用滤镜)
语法
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000',endColorstr='#0000ff',GradientType=0);
startColorstr 开始颜色
endColorstr 结束颜色
GradientType 渐变类型 :值(0:线性上下|1:线性左右|2:第二个值到黑色,上下)
标签:CSS3,00f,gradient,背景,渐变,50%,f00,background,linear
来源: https://blog.csdn.net/qq_36519236/article/details/89316892
html背景位置渐变,CSS3(背景和渐变)相关推荐
- css透明到渐变,css渐变(css3背景透明渐变)
竖向使这个div的颜色渐变,从red开始渐变到白色,请问怎么写css代码?最好. CSS3支持颜色渐变,但目前主流浏览器对CSS3支持都不完全,甚至不支持.所以你可以使用背景图片来做,你要竖向渐变,可 ...
- html背景线性渐变,CSS3背景颜色渐变 - 线性/放射性/循环
渐变就是多种颜色混合而成的效果,css3要实现渐变,就必须使用渐变函数来设置background或则background-imge属性.同时为了兼容各个浏览器(IE,safari,chrome,Fir ...
- CSS 背景(background)(背景颜色color、背景图片image、背景平铺repeat、背景位置position、背景附着、背景简写、背景透明、链接导航栏综合案例)
1. 背景颜色(color) background-color:颜色值; 默认的值是 transparent 透明的 示例代码: <!DOCTYPE html> <html lang ...
- html5对话框背景透明度,纯CSS3背景透明的Speech Bubbles对话气泡
这是一款使用纯CSS3制作的背景透明的Speech Bubbles对话气泡特效.该对话气泡使用两张透明的png图片来作为背景,通过简单的CSS代码来将它们组合为一个对话气泡效果. 使用方法 HTML结 ...
- 背景颜色渐变 css3 ---- 转自:至尊宝的BLOG http://blog.sina.com.cn/zzbnie
背景颜色渐变 css3 一. Webkit浏览器 (1) 第一种写法: background:-webkit-gradient(linear ,10% 10%,100% 100%, color-sto ...
- html背景位置渐变,css 背景和渐变
css 背景和渐变 background 背景 所有背景属性都不能继承 在CSS2.1里,background属性的简写方式包含五种属性值 – background-color, background ...
- php背景时间渐变,CSS3怎么实现背景颜色渐变?(图文+视频)
本篇文章主要给大家介绍css3背景渐变的实现方法总结. 我们在前端开发过程中,为了丰富网站样式内容,那么背景色渐变就有很不错的视觉效果.所谓CSS3 渐变(gradients)也就是可以让你在两个或多 ...
- css3背景渐变与边框阴影
一.盒子阴影和文字阴影 box-shadow: 盒子阴影 ie9 5个参数: 参数1:水平偏移量 +- 必选 ...
- CSS3 - 设置渐变颜色背景,线性/放射性/循环
渐变就是多种颜色混合而成的效果,css3要实现渐变,就必须使用渐变函数来设置background或则background-imge属性.同时为了兼容各个浏览器(IE,safari,chrome,Fir ...
- oracle数据库渐变色,CSS3背景颜色渐变(gradients),适用于微信小程序
CSS3 渐变(gradients)可以在两个或多个指定的颜色之间显示平稳的过渡. CSS3 定义了两种类型的渐变(gradients): 线性渐变(Linear Gradients)- 向下/向上/ ...
最新文章
- 不越狱无硬件,轻松搞定iPhone投影与录屏
- 要学好 C 语言 / C++ ,Makefile 可少不了
- 英文求职信计算机网络,计算机网络专业毕业生英文求职信.doc
- 微信小程序搜索多个关键字高亮
- 10-4 5-4 查询至少生产三种不同速度PC的厂商 (20 分)
- SDP协议 学习笔记
- 准备 KVM 实验环境 - 每天5分钟玩转 OpenStack(3)
- [HNOI 2014]道路堵塞
- 校招真题练习009 配比(京东)
- Android Studio导入Project、Module的正确方法
- [导入]SQL Server 索引基础知识(4)----主键与聚集索引
- h5 如何录音保存上传_H5录音及保存到后台recorder.js实现
- Biorhythms 中国剩余定理
- wps linux 哪个版本好用吗,WPS Linux版与国产统一操作系统UOS完成适配:体验追上Wintel...
- 基于STM32的录音与播音
- matlab 彩色转为黑白,彩色图转为灰度图和黑白图方法
- 利用win10自带的系统配置禁止开机启动项和程序
- 三大运营商网络使用频段及随身wifi选用
- 随手写了一段C++访问LDAP, 并且获取sid的代码
- 嵌入式网络的基础知识 -- 数据包的组装、拆解、各头部格式