整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
篇文章主要讲述了CSS的基础用法，讲述了如何定义头文件，导入CSS文件，id和class选择器，元素选择器，后代选择器，子元素选择器，兄弟选择器，伪类选择器等等，让大家对CSS选择器有个简单的认识和了解。这篇接上篇文章，继续讲解CSS的基础用法。
背景可以设置很多，比如背景颜色，背景图片，背景定位，背景重复，背景关联，
<div style='background-color='red'></div><div style='background-image: url('1.png');'></div><div style='background-position:center'></div>
center 中间
top 顶部
bottom 底部
right 右边
left 左边
还可以使用百分比来设置定位：
<div style='background-position:40% 50%'></div>
或者设置像素值：
<div style='background-position:100px 100px'></div><div style=' background-repeat:repeat-x'></div>
repeat-x 水平平铺图片
repeat-y 垂直平铺图片
no-repeat 不平铺图片<div style='background-attachment:fixed'></div>
fixed 固定 不出现滚动条
scroll 出现滚动条
no 没有滚动条<div style='background-size:50px 50px'></div><div style='background-origin:content-box'></div>
content-box 文本内容区域
padding-box 内边距区域
border-box 外边框区域<div style='background-clip:content-box'></div>
content-box 裁剪文本内容区域
padding-box 裁剪内边距区域
border-box 裁剪外边框区域这篇文章主要介绍了CSS样式更改篇中的背景Background的基本设置，希望让大家对CSS选择器有个简单的认识和了解。
****看完本文有收获？请转发分享给更多的人****
想要学习更多，请前往Python爬虫与数据挖掘专用网站：http://pdcfighting.com/
信ID：WEB_wysj(点击关注) ◎ ◎ ◎ ◎ ◎◎◎◎◎一┳═┻︻▄
（页底留言开放，欢迎来吐槽）
● ● ●
难题：直接设置一个半透明的边框不起作用。
解决方案：padding-box盒模型border:10px solid rgba(255,255,255,.5);background: white;background-clip: padding-box;
背景知识:box-shadow 的基本用法
box-shadow: X轴偏移量 Y轴偏移量 [模糊半径] [扩展半径] [阴影颜色] [投影方式];
解决方案一：
利用box-shadow的属性扩张半径background:
yellowgreen;box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink, 0 2px 5px 15px rgba(0,0,0,.6);
特点：box-shadow 方案只能模拟实线边框，会贴合元素的圆角
解决方案二：outline 方案background: yellowgreen;border: 10px solid #655;outline: 5px solid deeppink;特点：实现的“边框”不会贴合元素的圆角，可以实现虚线边框
示例：实现一个背景图在div右下角，距离右边10px 下边10px 如图;
解决方案一：background-position扩展方案background: #58a url(code-pirate.svg) no-repeat bottom right;background-position: right 10px bottom 10px;
解决方案二：background-origin 方案padding: 10px;background: url("code-pirate.svg") no-repeat #58a bottom right; /* 或 100% 100% */background-origin: content-box;解决方案三：calc 方案background: url("code-pirate.svg") no-repeat;background-position: calc(100% - 20px) calc(100% - 10px);两个div很容易实现，那么一个div呢？
解决方案：利用box-shadow和outlinebackground: tan;border-radius: .8em;padding: 1em;outline: .6em solid #655;box-shadow: 0 0 0 .4em #655;
box-shadow的宽要小于outline宽度值，大于 (Math.sqrt(2)-1)r（这里的 r 表示 border-radius）
背景知识：CSS 线性渐变，background-size
案例一：等宽的双色水平条纹
background: linear-gradient(#fb3 50%, #58a 0);background-size: 100% 30px;
案例二：不等宽的双色水平条纹
background: linear-gradient(#fb3 30%, #58a 0);background-size: 100% 30px;
案例三：三色水平条纹
background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%, yellowgreen 0);background-size: 100% 45px;
案例四：垂直条纹
background: linear-gradient(to right, /* 或 90deg */ #fb3 50%, #58a 0);background-size: 30px 100%;
案例五：斜向条纹
失败方案：改变 background-size 的值和渐变的方向background: linear-gradient(45deg, #fb3 50%, #58a 0);background-size: 30px 30px;
正确方案：做到无缝拼接(60度的条纹不好做)background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);background-size: 30px 30px;
优化方案：重复渐变做60度条纹background: repeating-linear-gradient(60deg, #fb3, #fb3 15px, #58a 0, #58a 30px);height:100%;
案例六：灵活的同色系斜向条纹
在大多数情况下，我们想要的条纹图案并不是由差异极大的几种颜色组成的，这些颜色往往属于同一色系。
失败方案：没有任何浏览器支持下面这个特性background: repeating-linear-gradient(60deg, #fb3 0 15px, #58a 0 30px);正确方案：不再为每种条纹单独指定颜色，而是把最深的颜色指定为背景色，同时把半透明白色的条纹叠加在背景色之上来得到浅色条纹background: #58a;background-image: repeating-linear-gradient(30deg, hsla(0,0%,100%,.1), hsla(0,0%,100%,.1) 15px, transparent 0, transparent 30px);
背景知识：CSS 渐变，“条纹背景”
CSS3 图案库lea.verou.me/css3patterns
背景知识：CSS 渐变，“条纹背景”，“复杂的背景图案”
大自然不会以“无缝”贴片的方式重复自己......
蝉原则：通过质数来增加随机真实性
蝉渐变图案：条纹图案把不同尺寸的渐变图案叠加起来，并使用质数来增加随机的真实感
background: hsl(20, 40%, 90%);background-image: linear-gradient(90deg, #fb3 11px, transparent 0), linear-gradient(90deg, #ab4 23px, transparent 0), linear-gradient(90deg, #655 41px, transparent 0);background-size: 41px 100%, 61px 100%, 83px 100%;
背景知识：CSS 渐变，基本的 border-image，“条纹背景”，基本的 CSS 动画案例一：一个元素有一圈装饰性的边框，基本上就是一张图片被裁剪进了边框所在的方环区域。不仅如此，我们还希望这个元素的尺寸在扩大或缩小时，这幅图片都可以自动延伸并覆盖完整的边框区域。
最简单的办法是使用两个HTML 元素：一个元素用来把我们的石雕图片设为背景，另一个元素用来存放内容，并设置纯白背景，然后覆盖在前者之上。问题来了：如果只用一个元素，我们能做到这个效果吗？
解决方案：padding: 1em;border: 1em solid transparent;background:linear-gradient(white, white) padding-box,url(stone-art.jpg) border-box 0 / cover;
案例二；老式信封样式的边框
案例三：蚂蚁行军边框
@keyframes ants { to { background-position: 100% } }.marching-ants {padding: 1em;border: 1px solid transparent;background:linear-gradient(white, white) padding-box,repeating-linear-gradient(-45deg, black 0, black 25%, white 0, white 50%) 0 / .6em .6em;animation: ants 12s linear infinite;}案例四：边框的裁切效果，用来模拟传统的脚注
border-top: .2em solid transparent;border-image: 100% 0 0 linear-gradient(90deg, currentColor 4em, transparent 0);padding-top: 1em;
干货！免费领取腾讯高级讲师网页设计教程
点我领取
☝☝☝
关注网页设计自学平台，99%的努力都在这里
▼无法识别二维码可以点「阅读原文」噢！
们学习 CSS 背景属性。
假设这里有个 div 容器，宽 400，高 300，默认情况下，这个 div 是没有背景的，或者说它的背景是透明的，我们拿一张图片实验一下就能看得出来，这个 div 在默认情况下，背景是透明的。
也可以给 div 加一个背景颜色。
既然可以设置背景颜色，那么当然也可以给这个 div 设计一个背景图片，就像这样。但是由于这个 div 已经被我设定了大小，图片呢，是大于这个容器的，所以实际上，我们最终看到的效果，是这个样子的。我们只能看到图片的一部分。下面我们就来看看应用 CSS 背景属性如何实现这个效果。
创建一个 css-background.html 文件和一个 background-style.css 文件。接下来，我们打算给整个页面来添加背景图片。
事实上，body 元素也是一个容器，可以直接给 body 添加背景图片。body 容器默认水平方向上，是占满整个窗口的，我们来给它添加一个高度样式，定义选择器 body，声明样式 height: 100%。
CSS
body {
height: 100%;
}预览一下效果，按下 F12，来观察一下页面 body 元素的大小，我们发现 body 依然是只有宽度，没有高度。为什么我们设置的高度 100% 不管用呢？大家注意，这里的100%是相对于它的父元素高度的，body 元素的父元素是 html，这个元素我们并没有给它设置大小。
所以，在 body 选择器前面加一个 html 逗号 ( html, )，这样两个元素都设置了高度。让他们的高度和浏览器窗口大小保持一致。
这时再来看一下页面，现在 body 和整个窗口就一样大了。
CSS
html, body {
height: 100%;
}下面我们给 body 添加背景图片，可以通过 background-image 属性实现，属性值为 url 后跟一个小括号，括号里面填写背景图片的路径 （url(./duck.gif)）。
回到样式代码，再定义一个 body 选择器，单独给它再声明样式 background-image: url(./duck.gif)。这个图片是一个动态图片。
我们来观看一下效果，为什么会出现这么多的图片呢？我明明只是加了一张背景图而已。原因是，当我们给元素添加背景图片的时候，图片是以平铺的方式来展现的。
什么是平铺呢？就是当我们放入一张背景图的时候，这个图片在默认情况下，会向四周扩散，无限的进行重复，就变成了这个样子。当然了，容器是有大小限制的，最终我们能看到的部分呢，也就这么多而已。
如果我们不希望这个背景图是重复的，需要使用一个新的背景属性 background-repeat，取值为 no-repeat。
我们来看效果，最终就只有一张动图了。
接下来我们来修改一下，将背景图片换成另外一张图片。
再来观察这个效果，由于不允许平铺，我们只看到了一张图片。
把 background-repeat 属性值 no-repeat 改为 repeat。
我们就看到了这样的效果。
在平时开发的时候，给一个网页或一个比较大的容器设置背景，经常会采用这样的技巧，放一个小的图片进去，只需要让它保持平铺的方式，我就会得到一张无限大的图。
再回到刚才的例子。如果要求这个背景图片在页面中间显示，我们如何调整背景图的位置呢？
我们需要使用 background-position 属性，这个属性需要写两个值：第一个值表示在水平方向上的对齐方式——left，center，right。第二个值表示在垂直方向上的对齐方式——top，center ，bottom。
给 body 添加样式 background-position: center center，也就是水平垂直居中。
大家发现，图片移到了页面的中间。如果将图片放到右下角，属性值该如何设置呢？把答案写到公屏上吧。
回到 html 代码，添加一个 h1 元素和五个 p 元素，填入一些文本。再复制五份。
再回到 css 代码，背景图恢复为 bg.png，图片平铺方式为 repeat。
我们看一下效果，可以通过滚动条来查看网页内容，仔细观察，文字和背景图片一起滚动。那能否实现文字滚动，背景图片不动呢？大家可以先脑补一下效果。
实现这个效果，需要使用 background-attachment 属性，用来声明容器里的背景图片与内容的依附方式。值 fixed：图片固定，值 scroll：同时滚动。
给 body 选择器添加样式 background-attachment
[əˈtætʃmənt] : fixed。
再看一下效果，滚动一下页面，背景固定的效果实现了！
前面我们多次使用到了 background-color 属性，它可以给容器设置背景颜色，值可以设置为颜色名称，十六进制颜色值，RGB颜色值等等。
把背景图片的样式注释掉，添加 background-color 属性，值为 green。
此时，整个页面背景为绿色！颜色有点深，可以让绿色变的浅一些吗？
你能想到的方法应该是换一个其他的颜色值，其实，我们可以通过让背景透明一些，同样可以实现这个效果。
这需要学习一个新的颜色值表示方法——rgba。这里的 rgb 就是 rgb 颜色值，a 是 alpha 的简写，表示通过设置一个 alpha 通道，来指定颜色的不透明度，是一个介于 0 到 1 的数字。0表示完全透明，1 表示完全不透明。比如 rgba(0, 0, 0, 0.5)，表示的颜色就是黑色半透明。
把 green 颜色名称改为 rgba(0, 255, 0, 0.1)。
我们看，页面绿色的背景因为透明，颜色变浅了！
为了缩短代码，也可以使用单一的 background 来指定所有的背景属性。
可以把 body 的全部背景属性，合并在一个 background 属性里。注释所有代码，声明属性 background，值可以写为：颜色值 rgba(0, 255, 0, 0.1)， 背景图片 url(./duck.gif)，平铺方式 no-repeat，背景图位置 right bottom，背景依附 fixed。 （rgba(0, 255, 0, 0.1) url(./bg.png) no-repeat right bottom fixed;）
我们看，一句声明，实现了全部的背景效果！
文章配套视频链接： https://www.bilibili.com/video/BV1oU4y1278g/?p=75
*请认真填写需求信息，我们会在24小时内与您取得联系。
