WEB前端-背景属性
WEB前端-背景属性
WEB前端-背景属性
背景属性
1.背景颜色
2.背景图片
3.设置背景图片是否平铺
4.设置背景图片位置
5.设置背景图片大小
6.设置背景是否受滚动条的影响
7.背景颜色渐变
(1)线性渐变
(2)径向渐变
(3)重复线性渐变
(4)重复径向渐变
背景属性
1.背景颜色
语法:background-color:颜色值
示意图
2.背景图片
语法:background-image:url(图片路径)
示意图
3.设置背景图片是否平铺
语法:background-repeat:值
取值:no-repeat不平铺,repeat-x横向平铺,repeat-y纵向平铺,repeat横向纵向都平铺------默认
示意图
4.设置背景图片位置
语法:background-position:水平位置,垂直位置
位置的取值可以为像素(相对左上角定点的位置),也可以为关键字:top left bottom right center
示意图
多学一招:
1.还可以使用百分比,不太常用:位置的固定规则为盒子自身的宽高百分比减去图片的宽高百分比,如下图:
2.在使用位置关键字的时候,关键字的前后顺序对结果不产生影响
3.可以只有一个值,代表水平方向和垂直方向都是这个值 ----此规则适用于关键字center,和百分比以及具体的像素
4.当只有一个值,且值为上下左右关键字时,上下左右只能代表x轴或y轴之一,另一个方向默认为center
5.设置背景图片大小
语法:background-size:宽度 高度
宽高取值可以是像素也可以是百分比
示意图
6.设置背景是否受滚动条的影响
语法:background-attachment:值
取值:
(1)scroll会受滚动条的影响,当内容滚动到下方,图片会消失----默认
(2)fixed不会受滚动条影响,一直保持在视线范围内
示意图
背景可以设置为透明
background:rgba(); /* a代表透明度,取值为0-1 */
背景和图片标签都可以让页面中显示图片,那有什么区别?
img和背景图片的区别: img不需要专门写宽高就能够显示在页面上 而背景图片默认是撑不开容器的 需要专门写宽高 一般产品插入图都推荐使用img 而一些小的icon 或者很少更新的图片 再或者超大的图片推荐使用背景图 而且背景图可以让内部的文字盖在上面,但是img不行(除非后期用定位)
7.背景颜色渐变
(1)线性渐变
语法:
<linear-gradient>:linear-gradient([ <point>,]? <color-stop>[, <color-stop>]+);
<point>:[ left | right ]? [ top | bottom ]? || <angle>?
<color-stop>:<color> [ <length> | <percentage> ]?
取值:
<point>
left: 设置左边为渐变起点的横坐标值。
right: 设置右边为渐变起点的横坐标值。
top: 设置顶部为渐变起点的纵坐标值。
bottom: 设置底部为渐变起点的纵坐标值。
<angle>: 用角度值指定渐变的方向(或角度),单位deg。
<color-stop>: 指定渐变的起止颜色。 <color-stop>
<color>: 指定颜色。请参阅颜色值
<length>: 用长度值指定起止色位置。不允许负值
<percentage>: 用百分比指定起止色位置。
写法一:
<div></div>
<style type="text/css">div{width:300px;height:200px;background:linear-gradient(red,black); /* 表示颜色从上往下,从红色到绿色转换,各占50%(默认) */}
</style>
效果图
写法二:
<div></div>
<style type="text/css">div{width:300px;height:200px;background:linear-gradient(to right,red,black); /* 表示颜色的渐变方向(也是九宫格) */}
</style>
效果图
写法三:
<div></div>
<style type="text/css">div{width:300px;height:200px;background:linear-gradient(45deg,red,black); /* 表示中间的水平线顺时针旋转10度开始渐变 */}
</style>
效果图
角度示意图
写法四:
<style type="text/css">div{width:300px;height:200px;background:linear-gradient(red 20%,black 50%,pink); /* 表示颜色渐变所占的百分比 */}
</style>
效果图
写法五:
<style type="text/css">div{width:300px;height:200px;background:linear-gradient(to top right,red 20%,black 30%,pink); /* 复合写法,表示颜色从左下角往右上角,从红色开始渐变到20%,再由黑色从20%渐变到30%,剩下的都是粉色 */}
</style>
效果图
颜色渐变方向有:to bottom、to top、to left、to right、to top right、to top left、to bottom left、to bottom right【其实就是一个四边形的四条边与四个角】
(2)径向渐变
语法:
<radial-gradient>:radial-gradient([ <position>,]? [ [ <shape> || <size> ] | <shape-size>{2},]? <color-stop>[, <color-stop>]+);
<position>:[ <length>① | <percentage>① | left | center① | right ]? [ <length>② | <percentage>② | top | center② | bottom ]?
<shape>:circle | ellipse
<size>:closest-side | closest-corner | farthest-side | farthest-corner | contain | cover
<shape-size>:<length> | <percentage>
<color-stop>:<color> [ <length> | <percentage> ]?
取值:
<position>
<percentage>①: 用百分比指定径向渐变圆心的横坐标值。可以为负值。
<length>①: 用长度值指定径向渐变圆心的横坐标值。可以为负值。
left: 设置左边为径向渐变圆心的横坐标值。
center①: 设置中间为径向渐变圆心的横坐标值。
right: 设置右边为径向渐变圆心的横坐标值。
<percentage>②: 用百分比指定径向渐变圆心的纵坐标值。可以为负值。
<length>②: 用长度值指定径向渐变圆心的纵坐标值。可以为负值。
top: 设置顶部为径向渐变圆心的纵坐标值。
center②: 设置中间为径向渐变圆心的纵坐标值。
bottom: 设置底部为径向渐变圆心的纵坐标值。
<color-stop>: 指定渐变的起止颜色。
<shape>
circle: 指定圆形的径向渐变
ellipse: 指定椭圆形的径向渐变。写本文档时Chrome,Safari尚不支持该参数值 <size>
closest-side: 指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner: 指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side: 指定径向渐变的半径长度为从圆心到离圆心最远的边
farthest-corner: 指定径向渐变的半径长度为从圆心到离圆心最远的角
contain: 包含,指定径向渐变的半径长度为从圆心到离圆心最近的点。类同于closest-side
cover: 覆盖,指定径向渐变的半径长度为从圆心到离圆心最远的点。类同于farthest-corner <shape-size>
<shape-size> <percentage>: 用百分比指定径向渐变的横向或纵向直径长度,并根据横向和纵向的直径来确定是圆或椭圆。不允许负值。
<length>: 用长度值指定径向渐变的横向或纵向直径长度,并根据横向和纵向的直径来确定是圆或椭圆。不允许负值。 <color-stop>
<color>: 指定颜色。请参阅颜色值
<length>: 用长度值指定起止色位置。不允许负值
<percentage>: 用百分比指定起止色位置。
写法一:
<div></div>
<style type="text/css">div{width:300px;height:200px;background:radial-gradient(orange,black);/* 从中心点向四周扩散渐变 */}
</style>
效果图
多学一招:div如果是正方形,扩散的形状会是圆形
<div></div>
<style type="text/css">div{width:200px;height:200px;background:radial-gradient(orange,black);}
</style>
效果图
写法二:
<div></div>
<style type="text/css">div{width:200px;height:200px;background:radial-gradient(orange 20%,black 30%,red 70%);/* 代表颜色扩散到哪个位置停止渐变 */}
</style>
效果图
多学一招:除了使用百分比还可以使用具体像素设置停止渐变的位置
<div></div>
<style type="text/css">div{width:200px;height:200px;background:radial-gradient(orange 50px,black 30%,red 70%);/* 橘色区域半径50px */}
</style>
效果图
因为50像素已经超过30%,所以橘色部分没有渐变(试试橘色和黑色都是30%)
写法三:
<div></div>
<style type="text/css">div{width:300px;height:200px;background:radial-gradient(circle,orange 10%,black 50%);/* 指定渐变的形状 */}
</style>
效果图
注意:指定形状的时候可以是circle圆形,也可以是ellipse椭圆
写法四:
<div></div>
<style type="text/css">div{width:300px;height:200px;background:radial-gradient(circle 100px,orange 10%,black 50%);/* 指定渐变的区域大小,因为是圆形,所以代表宽100px高也是100px */}
</style>
效果图
注意:如果指定的形状是圆形,那么指定区域大小的时候只需要一个值就好,可要是椭圆形的时候需要两个值,因为椭圆的宽和高不一样,否则直接不能显示页面
<style type="text/css">div{width:300px;height:200px;background:radial-gradient(ellipse 200px 100px,orange 10%,black 50%);/* 指定椭圆形的区域大小需要两个值一个宽一个高 */}
</style>
效果图
写法五:
<div></div>
<style type="text/css">div{width:300px;height:200px;background:radial-gradient(ellipse 200px 100px at right bottom,orange 10%,black 50%);/* 指定径向渐变的圆心 */}
</style>
效果图
多学一招:圆心默认在中心,或者使用关键字center
(3)重复线性渐变
语法
repeating-linear-gradient(方向,颜色 结束百分比,...);
<div></div>
<style type="text/css">div{width:300px;height:200px;background:repeating-linear-gradient(to right bottom,red 10%,green 20%);/* 渐变方向为右下角,指定每种颜色的结束位置,重复渐变 */}
</style>
效果图
(4)重复径向渐变
语法:
repeating-radial-gradient(形状 方向,颜色 结束百分比,...;
<div></div>
<style type="text/css">div{width:300px;height:200px;background:repeating-radial-gradient(ellipse at center,red 10%,green 20%);/* 渐变形状为椭圆,渐变中心为中心,指定每种颜色的结束位置,重复渐变 */}
</style>
效果图
注意:未指定颜色值的结束位置时,颜色是平均分配的
WEB前端-背景属性相关推荐
- web前端 背景色属性bgcolor
通过<body>元素中的bgcolor属性来设定网页的背景颜色. 其语法格式如下: <body bgcolor="value"> 颜色是属性值的设定有三种方 ...
- web前端----jQuery属性操作
知识点总结 1.属性 属性(如果你的选择器选出了多个对象,那么默认只会返回出第一个属性). attr(属性名|属性值) - 一个参数是获取属性的值,两个参数是设置属性值 - 点击加载图片示例 remo ...
- 面向 Web 前端的原生语言总结手册
这一系列文章旨在让具有 Web 前端背景的开发者快速上手原生语言. 背景与动机 从 WebView 到 Hybrid 再到 React Native,移动端主流技术方案中前端同学的施展空间越来越大.但 ...
- Web前端,CSS中关于背景颜色、背景图片、背景平铺、背景位置、背景相关属性连写
前言 持续总结输出中,今天分享的是Web前端,CSS中关于背景颜色.背景图片.背景平铺.背景位置.背景相关属性连写 1.背景颜色 background-color(bgc) 颜色取值: 关键字.rgb ...
- Web前端开发笔记——第三章 CSS语言 第三节 文本、字体、背景、超链接样式属性
目录 一.CSS文本属性 二.CSS字体属性 (一)常用文本字体样式属性 (二)设置整体font属性 三.CSS背景属性 (一)背景颜色 (二)背景图片 (三)图片平铺方式 (四)图片位置 (五)设置 ...
- canvas clear 指定属性的元素_好程序员web前端分享CSS属性组成及作用
好程序员web前端分享CSS属性组成及作用 学习目标 1.css属性和属性值的定义 2.css文本属性 3.css列表属性 4.css背景属性 5.css边框属性 6.css浮动属性 一.css属性和 ...
- 自学web前端怎么学?web前端学习路线css属性
自学web前端技术,如果才能找到一份web前端的工作.按照现在的招聘标准来看,无论你去哪个公司面试,你只需要满足他们公司的需求就可以.找到一份web前端工作需要掌握的内容如下: 首先是html,css ...
- web前端入门到实战:CSS颜色、背景和剪切
颜色 CSS 中可以改变文字的颜色还有元素的背景颜色.可以用颜色关键字来定义颜色,如red,但是这些颜色关键字并不常用. transparent transparent可以让文字或背景变的完全透明的颜 ...
- web前端入门到实战:HTML5实现首页动态视频背景
你想实现动态视频作为背景的首页吗?来,一起来学习,本文将带你一起实现H5动态视频背景: 首先网上找一段清晰的视频下载下来,最好是MP4格式的:下载好了之后我们新建一个html文件来写代码: html代 ...
最新文章
- .NET Compact Framework 2.0 SP2 for Platform Builder (4.2, 5.0, 6.0)
- c/c++ typedef定义函数指针(Hook前奏2)
- 使用Kylin导入JDBC数据源遇到的问题
- 【Python】Matplotlib切割图片
- MySQL入门之select、from、join、where子句及基本匹配符
- NIPS2018 Workshop一览
- ImportError: Missing optional dependency ‘xlrd‘. Install xlrd >= 1.0.0 for Excel support Use pip or
- acl在内核里的位置_在Linux中使用ACL(访问控制列表)保护文件/目录
- [ 转载 ] Handler详解
- Javascript:拦截所有AJAX调用,重点处理服务器异常
- 高富帅与大公司 续三 自我认知
- 带接口的webservice方式发布
- 文献管理三剑客之NoteExpress和Endnote文献的管理,写论文时参考文献的格式
- LoadRunner11下载以及详细破解说明
- vue引用echarts柱形加折线统计图(周月年动态切换数据)
- ISO 8601规则
- 打赢防“疫”战,云服务商都做了什么……
- 【行业秘密公开】所谓的QQ刷钻业务
- MySQL中delete结合exist删除数据
- 【C语言】深入理解二级指针
热门文章
- 前端知识-表格知识+美化表格样式项目
- Cad二次开发双线(Demo)
- java中415是什么异常_@RequestBody 错误415问题如何解决
- java毕业生设计电子商城系统计算机源码+系统+mysql+调试部署+lw
- JavaFX UI组件——Choice Box
- 纯css3火箭穿越太空动画js特效
- L2-027 名人堂与代金券 (25分)
- vue使用柱状图每个柱状图颜色不同并渐变
- php lrange,PHP+Redis实战教程(3):list列表类型
- 搜索引擎数据采集的10个经典方法