从零开始前端学习[9]:css中的背景样式background的使用
来源:互联网 发布:端口号的目的是 编辑:程序博客网 时间:2024/06/05 04:49
css中的背景样式background的使用
- background-color 背景颜色
- background-image 背景图片
- background-repeat 规定如何重复背景图片
- background-position 规定背景图片的位置
- background-attachment 背景关联属性
- background-size
- background: 综合样式的控制属性
注意:
在使用背景属性的时候,一定要给背景宽高
提示
博主:章飞_906285288
博客地址:http://blog.csdn.net/qq_29924041
background-color 背景颜色
background-color顾名思义,就是背景样式的颜色设置:
使用非常简单,主要区分的就是其后面的数值可以有很多种
使用:
background-color:#333344; //使用16进制background-color:red; //使用英文名字设置background-color:rgb(aa,bb,cc); //使用rgb进行16进制颜色转换background-color:rgba(11,22,33,0.5) //增加了颜色的透明度注意颜色透明度的数值是从0---1之间background-color:#ccc rgb(22,22,22) rgba(22,44,66,0.4);
代码如下
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8--> <meta name="Generator" content="EditPlus®"> <!--编辑器的名称--> <meta name="Author" content="作者是谁"> <meta name="Keywords" content="关键词"> <meta name="Description" content="描述和简介"> <style type="text/css"> body, dl, dd, dt, p, h1, h2, h3, h4, h5, h6 { margin: 0; } ul, ol { margin: 0; list-style: none; padding: 0; } a { text-decoration: none; } * { margin: 0; padding: 0; } .main{ width: 1200px; background-color: #84a3e3; border: 1px solid red; margin: 30px auto; } .main div{ width: 100px; height: 100px; } .main .hex{ background-color: #330033; } .main .english_color{ background-color: red; } .main .rgb{ background-color: rgb(55,66,77); } .main .rgba{ background-color: rgba(11,22,33,0.5); } </style></head><body> <div class="main"> <div class="hex"> 使用16进制颜色 </div> <div class="english_color"> 使用英文名字 </div> <div class="rgb"> 使用rgb进行颜色设置 </div> <div class="rgba"> 使用rgba进行颜色设置 </div> </div></body></html>
如下所示:
background-image 背景图片的加载
背景图片的加载,使用的是url进行加载,注意url是小写,并且内部是有引号的
background-image:url("图片的路径");background-image:none;//表示不去加载背景图片
注意:加载的路径可以使本地绝对路径,相对路径,以及网络路径等,具体看项目需求
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8--> <meta name="Generator" content="EditPlus®"> <!--编辑器的名称--> <meta name="Author" content="作者是谁"> <meta name="Keywords" content="关键词"> <meta name="Description" content="描述和简介"> <style type="text/css"> body, dl, dd, dt, p, h1, h2, h3, h4, h5, h6 { margin: 0; } ul, ol { margin: 0; list-style: none; padding: 0; } a { text-decoration: none; } * { margin: 0; padding: 0; } .main{ width: 1200px; background-color: rgba(33,44,55,0.5); margin: 20px auto; } .main .content{ width: 450px; ; height: 684px; background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505668587341&di=bd80b10b1e9b3815599c80fc05799cd4&imgtype=0&src=http%3A%2F%2Fupload.newhua.com%2F2012%2F0601%2F1338536906276.jpg"); } </style></head><body> <div class="main"> <div class="content"> </div> </div></body></html>
background-repeat 规定如何重复背景图片
background-repeat:主要是规定了显示图片是否重复的属性,
在前面一个案例中,主要是我设置的宽高刚刚好是图片本身的宽高,如果盒子的尺寸设置为大于图片的尺寸,这个时候就是默认会平铺
如只是将类content的宽高属性修改完,
.main .content{ width: 800px; ; height: 800px; background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505668587341&di=bd80b10b1e9b3815599c80fc05799cd4&imgtype=0&src=http%3A%2F%2Fupload.newhua.com%2F2012%2F0601%2F1338536906276.jpg"); }
显示的效果如下:
可以看到当图片不足以铺满完整的盒子的时候,会默认的沿着x和y轴的方向去平铺,注意:这个平铺的属性值是默认的
下面就看下background-repeat的属性值
background-repeat:no-repeat;//取消平铺属性background-repeat:repeat;//沿着x轴和y轴的方向去平铺background-repeat:repeat-x;//沿着x轴的方向平铺,background-repeat:repeat-y;//沿着y轴的方向上去平铺
注意:no-repeat属性值一般不是单独去使用的,因为当外部盒子过大的时候,图片不能铺满的话,这个时候就会凸显出内部图像与外部盒子的边框之间的界限,UI显示上面会显得low的一笔
background-position 规定背景图片的位置
重点提示:background-position在图标选择中的作用及其重要,或者重要的一笔。
background-position:也叫图片定位,可以定位图标的位置
background-positiond属性值:1:使用关键字:top,bottom,left,right,和center两两组合来实现如果只是出现一个关键字,则默认另外一个为center2:使用百分比来,参考的原长为父级的宽高的长度 background-position:20% 30%;父级宽度的百分之20,父级高度的30%3:使用具体的数值来进行定位: background-position:20px 30px;//第一个为x轴方向,第二个为y轴方向
注意:使用具体定位的时候,其参考的初始点为原点,即最左侧定角的坐标为0,0;(注意定位的正负方向性,这个可以使用浏览器调节)
实例图片:
实例代码如下所示:
<!doctype html><html> <head lang="en"> <meta charset="utf-8" /> <title>实例代码</title> <meta name="Keywords" content="" /> <meta name="Description" content="" /> <link rel="stylesheet" href="" /> <link rel="shortcut icon" type="image/x-icon" href="" /> <!-- <base target="_blank" /> --> <style type="text/css"> body,dl,dt,dd,p,h1,h2,h3,h4,h5,h6{margin:0;} ul,ol{margin:0;list-style:none;padding:0;} a{text-decoration:none;color:inherit;} *{margin:0;padding:0;} body{ background:gray; } .main{ width:40px; margin:10px auto; } .main ul li a{ display:block; height:40px; background:url("../images/1.png")no-repeat; margin-bottom:5px; } .main ul li #icon_1{ background-position:-80px 280px; } .main ul li #icon_2{ background-position:0px -200px; } .main ul li #icon_3{ background-position:0px -240px; } .main ul li #icon_4{ background-position:0px -320px; } .main ul li #icon_5{ background-position:0px 0px; } </style> </head> <body> <div class="main"> <ul> <li><a href="#" id = "icon_1"></a></li> <li><a href="#" id = "icon_2"></a></li> <li><a href="#" id = "icon_3"></a></li> <li><a href="#" id = "icon_4"></a></li> <li><a href="#" id = "icon_5"></a></li> </ul> </div> <hr> 素材 </br> <div><img src="../左侧菜单.png" alt="" /></div> </body></html>
显示如下:
background-attachment 背景关联属性
background-attachment主要的含义就是背景与页面进行关联
主要的属性值有以下两个scroll 默认值,背景图片会随着页面的滚动而进行滚动fixed 当其余页面进行滚动的时候,背景图片是不会进行滚动的
其实脱离了文档流,但是等于是在父级的上的位置,父级在滚动的时候,
scroll会跟着父级的滚动也会一起滚动,而fixed属性值则不会跟着父级滚动而滚动
这里不进行演示,有时候确实也会在牛皮藓广告中偶尔会用到
background-size图片的尺寸信息
我们背景图片的尺寸,第一个字是x轴方向的,第二个字呢是我们的Y轴方向
background-size:主要可以有四个属性的值1:background-size:100px 200px; //具体的数值,第一个是宽,第二个是高2:background-size:10% 20%; //按照父级的百分比来计算3:background-size:cover; //图片按照等比例放大,直到覆盖整个盒子为止4:background-size:contain; //图片也是等比例放大,直到遇到一条边为止
以上属性值比较常用的大概是contain或者cover;至于宽高一般直接给了父级。
background: 综合样式的控制属性
background与margin或者padidng一样,也是有着复合属性的,复合属性的,其复合属性的属性,大概可以也就是将上述的属性综合起来,然后写在一起罢了
background:background-color background-image background-repeat background-position/backrgound-size;
如下使用方式:
background:red url("../images/1.jpg")no-repeat 20px 30px/cover; background: deeppink url("images/1.jpg")no-repeat center/cover; background: deeppink url("images/1.jpg")no-repeat 0 0/cover;
具体实例就不演示了,其使用很简单,主要就是要简单的背一下。
欢迎持续访问博客
- 从零开始前端学习[9]:css中的背景样式background的使用
- 从零开始前端学习[12]:css样式中的高级选择器
- 前端学习第四弹:CSS样式中的背景设置
- 【CSS学习】CSS背景background、background-position使用详解
- 从零开始前端学习[51]:js中去操作css样式以及css属性的替代方法
- 从零开始前端学习[15]:css样式之border-radius圆角使用
- CSS背景background使用攻略
- 从零开始前端学习[10]:控制字体的样式font样式
- CSS背景样式使用
- js中使用background-size等带“-”的css样式
- 从零开始前端学习[11]:控制文本显示的样式属性
- CSS入门之背景样式实例,背景图滚动:background-attachment,background复合样式
- CSS的背景图像属性background
- CSS背景(background)的基本用法
- CSS中背景的综合属性background
- css background控制背景图像的位置
- css 背景属性background的使用方法
- CSS background-position 背景定位的用法
- STM32学习笔记系列(由局部到整体,由基础到系统,很合理的进阶过程)
- 如何在Android5.1系统上实现RecyclerView高度自适应
- servlet验证码
- 鼠标选择图像上点或者闭合多边形
- 转载反射机制
- 从零开始前端学习[9]:css中的背景样式background的使用
- HDU 6211 Pythagoras (预处理, 2017 ACM/ICPC Asia Regional Qingdao Online)
- 美团笔试题 钱币组合问题
- LeetCode 39. Combination Sum
- java打印五星图形,字符串数组
- September English summary
- Docker中安装Centos6
- HTTP Status 404-no result defined for action com.huida.action.LinkManAction and result input
- 【Java】——list中快速进行数据筛选