CSS 图像高级 CSS 渐变
CSS 渐变
CSS 渐变是在 CSS3 Image Module 中新增加的 <image> 类型。
使用 CSS 渐变可以在两种颜色间制造出平滑的渐变效果。用渐变代替图片,可以加快页面的载入时间、减小带宽占用。
同时,因为渐变是由浏览器直接生成的,渐变在页面缩放时的效果比图片更好,可以更加灵活、便捷的调整页面布局。
浏览器支持两种类型的渐变:
- 线性渐变 (linear),通过 linear-gradient 函数定义
- 径向渐变 (radial),通过 radial-gradient 函数定义
线性渐变
linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于<gradient>数据类型,是一种特别的<image>数据类型。
linear-gradient函数的语法:
1
|
linear-gradient (方向或角度,颜色 1 ,颜色 2 ,...颜色n,背景图片) |
其中背景图片是可选的。
下面的代码演示了线性渐变的用法。
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>线性渐变</
title
>
<
style
type
=
"text/css"
>
body{
padding:20px;
}
div{color:#fff;}
div.one{
width:100%;
height:150px;
border:1px solid #000;
background: linear-gradient(to bottom, blue, white);
}
div.two{
width:100%;
height:150px;
border:1px solid #000;
background: linear-gradient(to right, blue, white);
}
div.three{
width:100%;
height:150px;
border:1px solid #000;
background: linear-gradient(30deg, #000, #ff0000);
}
div.four{
width:100%;
height:150px;
border:1px solid #000;
background: linear-gradient(to right, red, orange, yellow, green,white, blue);
}
div.five{
color:#000;
width:418px;
height:150px;
border:1px solid #000;
background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)),
}
</
style
>
</
head
>
<
body
>
<
h1
>软件开发,成就梦想</
h1
>
<
div
class
=
"one"
>从上到下</
div
>
<
div
class
=
"two"
>从左到右</
div
>
<
div
class
=
"three"
>角度 30度</
div
>
<
div
class
=
"four"
>色标</
div
>
<
div
class
=
"five"
>背景图片渐变</
div
>
</
body
>
</
html
>
计算结果:
色标,在渐变中,可以使用两种以上的颜色,这就是色标。
渐变加透明,效果更好,透明是通过背景颜色来实现,其中0是不透明,1是100%透明。
CSS 图像高级 CSS 渐变的更多相关文章
- CSS 图像高级 Css Sprites
上节课中我们学习了背景图像,这节课我们学习背景图像的高级知识,如Css Sprites,CSS 背景渐变等. Css Sprites Css Sprites,国内也叫CSS精灵.它的原理是将许多的小图 ...
- CSS 图像高级 径向渐变
径向渐变 径向渐变使用 radial-gradient 函数语法. 这个语法和线性渐变很类似, 可以指定渐变结束时的形状 以及它的大小. 默认来说,结束形状是一个椭圆形并且和容器的大小比例保持一致. ...
- CSS Sprites (CSS图像拼合技术)教程工具
什么是CSS Sprites? “Sprite”(精灵)这个词在计算机图形学中有它独特的定义,由于游戏.视频等画质越来越高,必须有一种技术可以智能的处理材质和贴图,并且要 同时保持画面流畅.“Spri ...
- CSS Sprites(CSS图像拼合技术)教程、工具集合
本集合是有一位国外设计师收集整合,并由 oncoding翻译成中文的,感谢他们的辛苦贡献.CSS Sprites技术在国外并不是什么新技术,只不过近两年(尤其08年开始)中国开始流行这个词,大家也开始 ...
- 《精通CSS:高级Web标准解决方案》学习笔记(上)
鉴于国产CSS书籍基本都是辣鸡的现状,我在半年前动用某工作室的购书资金采购了一些技术书籍,这本广受好评的<精通CSS>也在其中.但是在阅读过后我深深的感觉到,如果说CSS本来已经是一种很琐 ...
- css 图像热区
CSS图像热区 在img标签当中,存在一个属性usemap属性,用来和map标签进行绑定,从而实现图像热区.所谓的图像热区,其实指的是在图像中插入一个连接,当用户点击图像的指定区域后就会进行页面跳转. ...
- CSS 图像居中对齐
CSS 图像居中对齐 我们在<CSS 内外边距>学过内容居中,它的原理是将外边左右设置为auto.图像居中也是这个原理. 示例 <!DOCTYPE html> <htm ...
- CSS 图像大小
CSS 图像大小 虽然在HTML中,img标签有属性height.width设置高和宽,在工作中却使用得非常少,通常使用CSS来控制大小. 给盒子设置属性height.width限制大小.单位通常是像 ...
- CSS 图像
CSS 图像 <上一节下一节> 通过CSS可以控制图像的大小和对齐方式. 图像大小 虽然在HTML中,img标签有属性height.width设置高和宽,在工作中却使用得非常少,通常使用C ...
随机推荐
- Redis 5.0.3集群部署
参考文章 https://blog.csdn.net/yyTomson/article/details/85783753 https://www.cnblogs.com/zy-303/p/102731 ...
- python安装media报错
Try https://pypi.python.org/pypi/setuptools easy_install LEE 我后来,依次在Python2.7中装了 numpy-1.7.0-win32-s ...
- 【转】/etc/rc.d/rc与/etc/rc.d/init.d的关系介绍
/etc/rc.d/init.d这个目录下的脚本就类似与windows中的注册表,在系统启动的时候执行.程序运行到这里(init进程读取了运行级别),相信从命名的角度大家也能猜到该运行/etc/rc. ...
- 第一节 Python基础之数据类型(整型,布尔值,字符串)
数据类型是每一种语言的基础,就比如说一支笔,它的墨有可能是红色,有可能是黑色,也有可能是黄色等等,这不同的颜色就会被人用在不同的场景.Python中的数据类型也是一样,比如说我们要描述一个人的年龄:小 ...
- C++指针速记
基本原则:指针类型变量存储的就是地址! 1.数组名就是数组首元素的地址** int age[3]; int* p = age; 2.使用new操作符实际上是向操作系统申请一块内存(包含类型信息),返回 ...
- LeetCode——295. Find Median from Data Stream
一.题目链接: https://leetcode.com/problems/find-median-from-data-stream 二.题目大意: 给定一段数据流,要求求出数据流中的中位数,其中数据 ...
- 读完这一篇,字符串格式化界的“白富美”(f-strings)抱回家!
f-strings 从Python 3.6开始,新引入了一种字符串格式化方法,称为“格式化字符串常量”(formatted string literal),简称f-strings.相比于%.str.f ...
- Google SketchUp Cookbook: (Chapter 2) Following Paths with Follow Me
软件环境 SketchUp Pro 2018 参考书籍 Google SketchUp Cookbook Follow Me工具 Follow Me工具,将2D图形沿着一条路径挤出生成3D物体. 使用 ...
- nmcli配置ipv6
nmcli配置ipv6 作者:Eric 微信:loveoracle11g [root@racooler ~]# nmcli connection show eno16777736 | grep ipv ...
- oracle 11g审计关闭,及删除日志
转自https://blog.csdn.net/louwzh/article/details/51274955 环境:Linux redhat6.3 下安装的oracle11g oracle 11g推 ...