大家好,我是作者《未来》
志同道合的小伙伴学会和我一起沟通!
第二阶段CSS3
08 CSS背景和应用程序
1背景色图片和平铺
背景颜色background
CSS可以添加背景颜色和背景图片,并设置图片。
格式与用法如下:
div {
width: 500px;
height: 500px;
background-color: pink;
background-image: url(image);
background-repeat: no-repeat;
}
sublime小技巧:“bgc+tab”=background-color
其他的以此类推
2 背景位置(一)
背景位置position
语法:
background-position: length length;
background-position: position position;
background-position: left top;/*默认的是在左上角*/
background-position: bottom right;/*方位名词没有顺序,谁都在前都可以*/
background-position: left;/*如果方位名词只写一个,另一个默认为center*/
参数:
length:百分数丨由浮点数字和单位标识符组成的长度值。请参阅长度单位position:top center bottom left right
3 背景位置(二)
精确单位:
background-position: 10px 30px;
/*第一个值一定是x坐标 第二个值一定是y坐标*/
background-position: 10 center;
/*混搭*/
4 魔兽背景图片
想让图片往上移,可以是负数值
background-image: url(image);
background-position: center -25px;
实际上用的最多的就是居中对齐
5 背景附着图
语法:
background-attachment: scroll、 fixed;
参数:
scroll:背景图像是随对象内容滚动
fixed:背景图像固定
说明:
设置或检索背景图像是随对象内容滚动还是固定的。
6 背景简写
background属性的值的书写顺序官方并没有强制标准的。为了可读性,建议大家如下写:
background背景颜色-背景图片地址-背景平铺-背景滚动-背景位置background:transparent url(image jpg) repeat-y scroll 50%0:
background: #000 url(image) no-repeat fixed center 100px;
黑色 图片地址 不平铺 水平居中 垂直100像素
后面的两个位置值是不能分开的
7 背景半透明
CSS3支持背景半透明的写法语法格式是
background: rgba(0, 0, 0, 0.7);
最后一个参数是 alpha透明度取值范围0-1之间
注意:背景半透明是指盒子背景半透明,盒子里面的内容不受影响。
同样,可以给文字和边框透明都是rgba的格式来写。
8 背景缩放(一)
通过 background-size设置背景图片的尺寸,就像我们设置img的尺寸一样,在移动Web开发中做屏幕适配应用非常广泛。
其参数设置如下:
a)可以设置长度单位(px)或百分比(设置百分比时,参照盒子的宽高)
background-size:50% ;
背景图片设置为原来的50%大小
9 背景缩放(二)
b)设置为 cover时,会自动调整缩放比例,保证图片始终填充满背景区堿,如有溢出部分则会被隐藏。
C)设置为 contain会自动调整缩放比例,保证图片始终完整显示在背景区域。
10 多背影图片
以逗号分隔可以设置多背景,可用于自适应布局做法就是用逗号隔开就好了。
1 一个元素可以设置多重背景图像。
2 每组属性间使用逗号分隔。
3 如果设置的多重背景图之间存在着交集(即存在着重叠关系),前面的背景图会覆盖在后面的背景图之上。
4 为了避免背景色将图像盖住,背景色通常都定义在最后一组上
div {
height: 300px height:300px;
background: url(image) no-repeat left top,
url(image) no-repeat right bottom hotpink
11 凹凸文字效果
12 王者荣耀导航栏(一)
13 王者荣耀导航栏(二)
文本的装饰
text-decoration通常我们用于给链接修改装饰效果
使用技巧:在一行内的盒子内,我们设定行高等于盒子的高度,就可以使文字垂直居中
看不懂的小伙伴不要气馁,后续的分享中将持续解释,只要你跟着我分享的课程从头到尾去学习,每篇文章看三遍,一个月后,回过头来看之前的文章就会感觉简单极了。
本章已结束,下篇文章将分享《09 CSS三大特性》小伙伴们不要错过哟!
1.文章《css如何添加文本背景,css中添加一个图片作为背景…》援引自互联网,为网友投稿收集整理,仅供学习和研究使用,内容仅代表作者本人观点,与本网站无关,侵删请点击页脚联系方式。
2.文章《css如何添加文本背景,css中添加一个图片作为背景…》仅供读者参考,本网站未对该内容进行证实,对其原创性、真实性、完整性、及时性不作任何保证。
相关推荐
- . 现代买票为什么带上携程保险
- . 潮阳怎么去广州南站
- . 湖南马拉河怎么样
- . 烧纸为什么到三岔路口
- . 百色为什么这么热
- . 神州租车怎么样
- . 芜湖方特哪个适合儿童
- . 护肤品保养液是什么类目
- . 早晚的护肤保养有哪些项目
- . 女孩护肤品怎么保养的最好