零基础学习CSS---05.CSS背景属性详解

CSS属性
一、背景属性
1.background-color(背景颜色):red；

2.background-image(背景图片):background-image:url(图片地址);

3.background-repeat(背景图片平铺):no-repeat(不平铺)/repeat(平铺)/repeat-x(x轴平铺)/repeat-y(y轴平铺)；

4.background-attachment(背景图片的固定):scroll(滚动)/fixed(固定)，固定就是固定在浏览器窗口里面，如果没有设置盒子，在整个页面窗口滑动始终是这个图片，如果设置在盒子里面，那么滑动到下一个盒子的时候就会显示下一个盒子的内容或者下一个盒子没有设置内容,那么就会没有，所以它(fixed)是基于background-image的,(scroll)就是基础的滚动；

5.background-position(图片位置):三种写法：数值，百分比，英文方位(left(左边)/bottom(顶部)/right(右边)/center(中间)/top(顶部)) 比如：background-position: 20px 20px;这两个值分别表示距离左边和距离上边的距离。左负值会往左,数值可以是百分比;

6.background-size(图片大小):数值，百分比，英文（contain、cover）
比如：
background-size: 400px 400px ;修改图片大小 100% 100%可以改成一样的 ;
background-size: cover; 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，也许无法显示在背景定位区域中;
background-size: contain;把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域，铺不满盒子，留白;

7.background复合书写：复合写法：空格隔开，顺序可以换，可以只去一个值，放在后面能覆盖前面的值(指的颜色)
二、代码演示：
1.background-color

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1{width: 200px;height: 200px;/* background-color: yellow;*//* background-color: rgb(255,0,0); *//* background-color: rgba(255,0,0, 0.5);/* backgound-color表示方法 */ background-color: #00ff00;}.box2{width: 100px;height: 100px;background-color: rgba(0,0,0,0.5);/* 0.5百分之五十透明度 */}</style>
</head>
<body><div class="box1">大家好<div class="box2"></div></div>
</body>
</html>

说明：rgba:red、green、blue、a代表透明的意思；0.5代表透明度为百分之五十。
结果：

2.background-image、background-reapeat

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1{width:400px;height:400px;background-color: yellow;/* background-image:url(../9BEBDEDA925B7017F50910F191E0362F.jpg); */background-image:url(../img/1.jpg);/* 默认平铺，小的图片会复制成好几份然后铺满整个 *//* 写在后面的会掩盖前面写的图片 *//* background-repeat: repeat-x;/* 平铺的X轴 */ /* background-repeat:repeat-y; 平铺的y轴*//* background-repeat: no-repeat; *//* background-position: 20px 20px;负值会往左,数值可以是百分比 *//* background-position: center center; *//* background-size: 400px 400px ;修改图片大小 100% 100%可以改成一样的 *//*   background-size: cover; */   /* 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，也许无法显示在背景定位区域中 *//* background-size: contain;把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域，铺不满盒子，留白 */}.box2{width: 400px;height: 400px;background-image: url(../70A523A143C73657A5371964059B1D3F.jpg);/* 大的图片盒子太小，只会显示一部分 */background-repeat: repeat;/* 默认平铺 *//* background-size:400px 400px ; */background-size: contain;}</style>
</head>
<body><div class="box1"></div><div class="box2"></div>
</body>
</html>

默认平铺结果：

平铺x轴展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1{width:400px;height:400px;background-color: yellow;/* background-image:url(../9BEBDEDA925B7017F50910F191E0362F.jpg); */background-image:url(../img/1.jpg);/* 默认平铺，小的图片会复制成好几份然后铺满整个 *//* 写在后面的会掩盖前面写的图片 *//* background-repeat: repeat-x;平铺的X轴 /* background-repeat:repeat-y; 平铺的y轴*//* background-repeat: no-repeat; *//* background-position: 20px 20px;负值会往左,数值可以是百分比 *//* background-position: center center; *//* background-size: 400px 400px ;修改图片大小 100% 100%可以改成一样的 *//*   background-size: cover; */   /* 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，也许无法显示在背景定位区域中 *//* background-size: contain;把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域，铺不满盒子，留白 */}.box2{width: 400px;height: 400px;background-image: url(../70A523A143C73657A5371964059B1D3F.jpg);/* 大的图片盒子太小，只会显示一部分 */background-repeat: repeat;/* 默认平铺 *//* background-size:400px 400px ; */background-size: contain;}</style>
</head>
<body><div class="box1"></div><div class="box2"></div>
</body>
</html>

结果：

读者可以自行试一下y轴；
3.background-position、background-size(图片大小)
background-position

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1{width:400px;height:400px;background-color: yellow;/* background-image:url(../9BEBDEDA925B7017F50910F191E0362F.jpg); */background-image:url(../img/1.jpg);/* 默认平铺，小的图片会复制成好几份然后铺满整个 *//* 写在后面的会掩盖前面写的图片 *//* background-repeat: repeat-x;  */  /*  平铺的X轴  *//* background-repeat:repeat-y; 平铺的y轴*/background-repeat: no-repeat;/* background-position: 20px 20px;这两个值分别表示距离左边和距离上边的距离。左负值会往左,数值可以是百分比 三种写法：1.数值，百分比，英文方位*/background-position: center center;/* background-size: 400px 400px ;修改图片大小 100% 100%可以改成一样的 同上三种写法 *//* background-size: cover; */    /* 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，也许无法显示在背景定位区域中*//* background-size: contain;   */      /*  把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域，铺不满盒子，留白  */}.box2{width: 400px;height: 400px;background-image: url(../70A523A143C73657A5371964059B1D3F.jpg);/* 大的图片盒子太小，只会显示一部分 */background-repeat: repeat;/* 默认平铺 *//* background-size:400px 400px ; */background-size: contain;}</style>
</head>
<body><div class="box1"></div><div class="box2"></div>
</body>
</html>

结果:

background-size
我会演示三种表现图片，但只会给一份代码，其他的可以去掉注释自行运算
代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1{width:400px;height:400px;background-color: yellow;/* background-image:url(../9BEBDEDA925B7017F50910F191E0362F.jpg); */background-image:url(../img/1.jpg);/* 默认平铺，小的图片会复制成好几份然后铺满整个 *//* 写在后面的会掩盖前面写的图片 *//* background-repeat: repeat-x;  */  /*  平铺的X轴  *//* background-repeat:repeat-y; 平铺的y轴*/background-repeat: no-repeat;/* background-position: 20px 20px;这两个值分别表示距离左边和距离上边的距离。左负值会往左,数值可以是百分比 三种写法：1.数值，百分比，英文方位*//* background-position: center center; *//* background-size: 400px 400px ;修改图片大小 100% 100%可以改成一样的 同上三种写法 *//* background-size: cover; */    /* 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，也许无法显示在背景定位区域中*//* background-size: contain;   */      /*  把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域，铺不满盒子，留白  */}.box2{width: 400px;height: 400px;background-image: url(../70A523A143C73657A5371964059B1D3F.jpg);/* 大的图片盒子太小，只会显示一部分 */background-repeat: repeat;/* 默认平铺 *//* background-size:400px 400px ; */background-size: contain;}</style>
</head>
<body><div class="box1"></div><div class="box2"></div>
</body>
</html>

数值结果：

contain结果:

cover结果:

4.background-attachment

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 300px;height: 1000px;}.box1{background-image: url(../img/2.jpg);background-attachment: fixed;/*  background-attachment*/background-repeat: no-repeat;background-color: yellow;}.box2{/* background-image: url(../img/1.jpg); */background-attachment: fixed;/* 根据盒子的范围来显示的 */background-repeat: no-repeat;background-color: orange;}</style>
</head>
<body><div class="box1"></div><div class="box2"></div>
</body>
</html>

结果读者可以自己运行，因为设计到滚动不好截图，如下：

5.background复合写法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box2{width:600px;height: 600px;/*  background-color: aqua;background-image: url(../img/0.jpg);background-repeat: no-repeat;background-attachment:fixed;background-position: center;/* fixed是整个窗口，而且为我们设置盒子在中间(center)，所以显示不出来 */ background: yellow url(../img/0.jpg) no-repeat center fixed;/* 复合写法 *//* background-size: ; 不能复合使用 */}/* 复合写法：空格隔开，顺序可以换，可以只去一个值，放在后面能覆盖前面的值 */.box1{width: 300px;height: 300px;background-color: yellow;background: url(../img/0.jpg)  no-repeat center top;/* center top位置不能瞎写，位置不能更换，后面的颜色默认是白色，会覆盖前面的值 */}</style>
</head>
<body><div class="box2"></div><div class="box1"></div>
</body>
</html>
<!-- background复合写法 -->

结果：

注意：复合写法的时候一定要注意，不然容易搞错，你看上面的代码，一个标准的复合写法，另一个简写就出现了问题，默认的白色覆盖了设置的黄色。
总结：
这一节我们学习了CSS背景属性：
1.background-color(背景颜色):red；

2.background-image(背景图片):background-image:url(图片地址);

3.background-repeat(背景图片平铺):no-repeat(不平铺)/repeat(平铺)/repeat-x(x轴平铺)/repeat-y(y轴平铺)；

7.background复合书写：复合写法：空格隔开，顺序可以换，可以只去一个值，放在后面能覆盖前面的值(指的颜色)，center top位置不能乱写，要小心复合的写法容易出错

最后放置一个有意思的页面背景background-attachment/background-position/background-size的应用,很漂亮好玩哦，我会放置背景图片和代码放在下面，读者自取即可。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}div{height: 780px;background-position: center;background-size: cover;background-attachment: fixed;}.box1{background-image: url(../img/bg1.png);background-position: center;background-size: cover;}.box2{background-image: url(../img/bg2.png);background-position: center;background-size: cover;}.box3{background-image: url(../img/bg3.png);background-position: center;background-size: cover;}</style>
</head>
<body><div class="box1"></div><div class="box2"></div><div class="box3"></div>
</body>
</html>

零基础学习CSS---05.CSS背景属性详解相关推荐

【前端小点】CSS之background背景属性详解
本篇文章我们将一起展开来看css的background背景属性. 一.结构创建DIV <div class="div1">1 </div> 样式 widt ...
【零基础入门前端系列】—背景属性（十二）
[零基础入门前端系列]-背景属性(十二) 一.背景属性 CSS背景属性主要有以下几个: CSS3中可以通过background-image属性添加背景图片. 不同的背景图像和图像用逗号隔开,所有的图片 ...
【前端就业课第一阶段】HTML5 零基础到实战（六）表格详解
注意:手机(APP)打开,内容显示更佳,不会的私聊博主即可想要拿代码或加入学习计划(** 博主会监督你并且教你写文章 **)的拉到最下面(PC端Web打开)加博主即可,目录也在最下面. 参加博主前端 ...
css动画-animation各个属性详解（转）
CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括: ...
【青山css】css3阴影效果属性详解及创意玩法
前言 css阴影效果是我们经常使用的一个css属性,但你有仔细了解过它吗?是不是用的时候直接从蓝湖上复制过来就行了,那你了解它的每个参数吗?用阴影又能实现哪些好看的效果呢?来看一看我收集总结的css阴 ...
background 背景属性详解
background 背景属性我们知道元素有前景色color,与之对应的还有背景色,通过background我们可以为元素添加实色(background-color)和任意多个背景图片(backgr ...
SVG排版教程 | 样式背景属性详解与应用
<元素属性原理详解与应用>讲到了SVG元素viewBox属性的实际应用,能够实现SVG元素在不同手机上的自适应适配(SVG元素的宽高根据手机屏幕大小等比例放大或缩小).SVG黑科技排版的每 ...
Java零基础学习-笔记05
1. 快速排序.冒泡排序 public static void main(String[] args) {int[] array = makeArray(10);System.out.print(&q ...
CSS中的margin、border、padding区别 CSS padding margin border属性详解
图解CSS padding.margin.border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...

零基础学习CSS---05.CSS背景属性详解

零基础学习CSS---05.CSS背景属性详解相关推荐

最新文章

热门文章