下载文档原格式
css background用法和搭配
CSS的background属性用于设置元素的背景样式。
通过background属性，可以设置元素的背景颜色、图片、重复方式、位置等属性。
以下是一些常用的background属性值及其搭配方式：
1. background-color：设置元素的背景颜色。
示例：background-color: #F5F5F5;（设置背景颜色为浅灰色）
2. background-image：设置元素的背景图片。
示例：background-image: url("image.jpg");（设置背景图片为名为image.jpg 的图片）
3. background-repeat：设置背景图片的重复方式。
示例：background-repeat: no-repeat;（设置背景图片不重复）
4. background-position：设置背景图片的位置。
示例：background-position: center;（将背景图片居中显示）
5. background-size：设置背景图片的大小。
示例：background-size: cover;（将背景图片拉伸以填满整个元素）
6. background-attachment：设置背景图片是否随元素滚动而滚动。
示例：background-attachment: fixed;（固定背景图片，不随元素滚动）
通过组合使用不同的background属性，可以实现各种背景样式的显示效果，例如渐变背景、带有背景图片的背景等等。
background-color参数背景颜色参数在网页设计中的应用引言：在网页设计中，背景颜色是一个重要的元素，它可以为网页增加美感，提升用户体验。
背景颜色参数是指在CSS中设置背景颜色的属性。
本文将详细讨论背景颜色参数在网页设计中的应用。
正文内容：1. 背景颜色参数的基本概念1.1 背景颜色的作用背景颜色可以为网页提供整体的视觉效果，使网页看起来更加美观和舒适。
1.2 CSS中的背景颜色属性在CSS中，通过background-color属性可以设置元素的背景颜色。
该属性可以接受各种颜色值，如十六进制、RGB值、颜色名称等。
2. 背景颜色参数的具体应用2.1 设置网页的整体背景颜色通过在CSS中设置body元素的background-color属性，可以为整个网页设置背景颜色。
2.2 设置特定元素的背景颜色通过在CSS中设置特定元素的background-color属性，可以为该元素设置独特的背景颜色，以突出其重要性或与整体风格相协调。
2.3 背景颜色的渐变效果CSS中的background-color属性还支持渐变效果，可以通过设置渐变的起始颜色和结束颜色，实现背景颜色的平滑过渡效果。
2.4 背景颜色的透明度设置通过设置背景颜色的透明度，可以实现一些特殊的效果，如半透明背景或叠加效果。
2.5 背景颜色的动画效果利用CSS的动画属性，可以实现背景颜色的动态变化，增加网页的交互性和吸引力。
3. 背景颜色参数对用户体验的影响3.1 背景颜色的对比度合理设置背景颜色的对比度可以提高网页的可读性和可访问性，使用户更加舒适地浏览网页。
3.2 背景颜色的情绪表达背景颜色可以传达出不同的情绪和氛围，如明亮的颜色可以给人带来活力和愉悦感，而暗淡的颜色则可能给人带来沉闷和压抑感。
3.3 背景颜色的品牌识别对于企业或品牌网站来说，背景颜色的选择和使用可以帮助用户更好地识别和记忆品牌。
4. 背景颜色参数在不同设备上的适配性4.1 响应式设计下的背景颜色在响应式设计中，需要考虑不同设备上的背景颜色适配性，以保证用户在不同设备上的浏览体验。
微信小程序wxss设置样式对于以前搞客户端开发的来说，有着客户端的逻辑，就是不知道怎么设置样式，把对应的控件显示出来一、wxml界面结构wxmL比较容易理解，主要是由八大类基础组件构成：一、视图容器(View Container)：二、基础内容(Basic Content)组件名说明组件名view视图容器iconscroll-view可滚动视图容器textswiper可滑动的视图容器progress三、表单组件(Form)四、操作反馈组件(Interaction)组件名说明组件名button按钮action-sheetform表单modalinput输入框progresscheckbox多项选择器toastradio单项选择器五、导航(Navigation)picker列表选择器组件名slider滑动选择器navigatorswitch开关选择器label标签六、多媒体(Media)七、地图(Map)组件名说明组件名audio音频mapimage图片video视频八、画布(Canvas)组件名说明canvas画布关于这八大类的属性和具体用法可参考以下参考文献链接：/weixinapp/itz51q8o.htmlhttps:///debug/wxadoc/dev/component/二、wxsswxml理解起来容易，但光搭好了框架，并不能达到我们想要的界面效果，这就需要用到wxss样式了。
wxss样式决定了组件应该如何显示，并在css的基础上做了一些功能扩展，主要包括：1.尺寸单位rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。
规定屏幕宽为750rpx。
一般以iphone6屏幕做为视觉设计标准。
rpx 与 px单位换算如下：设备rpx换算px (屏幕宽度/750)px换算rpx (750/屏幕宽度)iPhone51rpx = 0.42px1px = 2.34rpxiPhone61rpx = 0.5px1px = 2rpxiPhone6s1rpx = 0.552px1px = 1.81rpx2.样式导入可以使用@import语句来导入外联样式表，其后面跟需要导入外联样式表的相对路径，并以分号结束。
颜色与背景本文，你将学习如何在网站上应用颜色与背景。
我们还会介绍用于定位和控制背景图像的高级方法。
本课将对下列CSS属性进行讲解：∙color∙background-color∙background-image∙background-repeat∙background-attachment∙background-position∙background前景色：‘color’属性CSS属性color用于指定元素的前景色。
例如，假设你要让页面中的所有标题（headline）都显示为深红色，而这些标题采用的都是h1元素，那么可以用下面的代码来实现把h1元素的前景色设为红色。
h1 {color: #ff0000;}∙显示示例颜色值可以用十六进制表示（比如上例中的#ff0000），也可以用颜色名称（比如“red”）或RGB值（比如rgb(255,0,0)）表示。
‘background-color’属性CSS属性background-color用于指定元素的背景色。
因为body元素包含了HTML文档的所有内容，所以，如果要改变整个页面的背景色的话，那么为body元素应用background-color属性就行了。
你也可以为其他包含标题或文本的元素单独应用背景色。
在下例中，我们为body和h1元素分别应用了不同的背景色。
body {background-color: #FFCC66;}h1 {color: #990000;background-color: #FC9804;}显示示例注意：我们为h1元素应用了两个CSS属性，它们之间以分号（“;”）分隔。
背景图像[background-image]CSS属性background-image用于设置背景图像。
在下面的示例中，我们使用了一张蝴蝶的图像作为背景。
你可以将该图片下载下来（方法为：鼠标右击该图片，然后选择“图片另存为”），以便在自己的计算机上使用。
当然，你也可以选用其他你觉得满意的图片。
css背景和边框标签实例详解⼀、css背景标签1，设置背景颜⾊back-ground-color 属性指定元素的背景⾊。
⼩实例如下图所⽰：运⾏结果如下：可以通过选择器给不同的标签设置不同的颜⾊，在这⾥h1,div,和p标签将拥有不同的背景⾊：实例：运⾏结果如下图所⽰：2.设置背景图像background-image属性指定⽤作元素背景的图像。
默认情况下，图像会重复，以覆盖整个元素。
⽤url来引⼊外部图⽚。
具体实例如下所⽰：运⾏结果如下图：注意事项：使⽤背景图⽚时，要注意背景图⽚的样式，不要有⼲扰到⽂本的图像，以免影响效果。
css背景重复的问题默认情况下，background-repeat属性在垂直和⽔平⽅向上都重复图像。
某些图像应只适合⽔平或垂直⽅向上重复，若想仅在⽔平⽅向上重复，需要⽤（background-repeat：repeat-x；），则背景看起来更好；若想要仅在垂直重复图像，需设置background-repeat：repeat-y；属性还可以指定只显⽰⼀次背景图像：⽤background-repeat：no-repeat标签即可。
4、指定背景图像的位置指定背景图像的位置需要使⽤background-position标签具体实例如下图所⽰：下⾯将会展⽰把背景图⽚放在右上⾓的代码：运⾏结果如下图所⽰：5、设置背景图像固定background-attachment 属性来设置背景图像固定，其属性值scroll图像随页⾯元素⼀起滚动（默认值），fixed图像固定在屏幕上，不随页⾯元素滚动。
6、设置背景图像⼤⼩background-size 属性可以设置背景图像的⾼度和宽度。
第⼀个值设置宽度，第⼆个值设置⾼度。
如果设⼀个值，则第⼆个值会默认auto。
其格式如下所⽰：background-size：属性1 属性2；实例如下：运⾏结果如下：7、设置图像透明效果使⽤opacity属性能够使任何元素能够使任何元素呈现出透明效果，透明度在0~1之间，其格式如下：opacity：opacityValue；⼆、css边框标签1.设置边框颜⾊（1）设置边框样式（border-style）边框样式⽤于定义边框的风格，常⽤属性值如下：none：没有边框即忽略所有边框的宽度（默认值）。
CSS背景（background）⼀、背景颜⾊（color）语法：background-color：颜⾊值；默认的值是 transparent 透明的⼆、背景图⽚（image）1、语法：background-image：none | url（url）参数作⽤none⽆背景图（默认的）url使⽤绝对或相对地址指定背景图像background-image：url（images/demo.png）；2、⼩技巧：提倡背景图⽚后⾯的地址，url不要加引号。
三、背景平铺（repeat）1、语法：background-repeat：repeat | no-repeat | repeat-x | repeat-y参数作⽤repeat背景图像在纵向和横向上平铺（默认的）no-repeat背景图像不平铺repeat-x背景图像在横向上平铺repeat-y背景图像在纵向上平铺四、背景位置（position）重点1、语法：background-position：length || lengthbackground-position：position || position参数值length百分数|由浮点数字和单位标识符组成的长度值position top | center | bottom | left | center | right ⽅位名词2、注意：①必须先指定background-image属性；②position后⾯是x坐标和y坐标，可以使⽤⽅位名词或者精确单位；③如果只指定了⼀个⽅位名词，另⼀个值默认居中，为50%；④如果只指定⼀个数值，那该数值⽤于x坐标，另⼀个默认是y坐标，默认居中。
⑤如果指定两个值，两个值都是⽅位名字，则两个值前后顺序⽆关，⽐如left，top和top，left 效果⼀致；⑥如果指定两个值，精确单位和⽅位名字混合使⽤，则第⼀个值是x坐标，第⼆个值是y坐标。
3、实际⼯作中⽤的最多的是背景图⽚居中对齐。
CSS中background的⽤法CSS中 background 是⼀个很基本的⽽且⽐较常⽤的样式background : background-color || background-image || background-repeat || background-attachment || background-size || background-clip || background-position这个是 background 的⼏个参数，这些参数并不是都要写上的。
1.background-color：背景颜⾊，这⾥可以写英⽂，可以写RGB，可以写#xxxxxxtransparent : 背景⾊透明2.background-image：背景图⽚，只能写 none 或者 url (url)3.background-repeat：背景图象的平铺repeat : 背景图像在纵向和横向上平铺no-repeat : 背景图像不平铺repeat-x : 背景图像在横向上平铺repeat-y : 背景图像在纵向平铺4.background-attachment：背景图象的流动性scroll : 背景图像是随对象内容滚动fixed : 背景图像固定5.background-size : 背景图⽚尺⼨属性length : 可以是尺⼨percentage ：百分⽐auto ：⾃动（默认值）cover ：按⽐例调整背景图⽚，这个属性值跟contain正好相反，背景图⽚会按照⽐如⾃适应铺满整个背景区域。
假如背景区域不⾜以包含背景图⽚的话，那么背景图⽚就会被咔嚓。
覆盖，背景要覆盖元素的所有区域，不能有空⽩出现。
contain ：按⽐例调整背景图⽚，使得其图⽚宽⾼⽐⾃适应整个元素的背景区域的宽⾼⽐，因此假如指定的图⽚尺⼨过⼤，⽽背景区域的整体宽⾼不能恰好包含背景图⽚的话，那么其背景某些区域可能会有空⽩。
包含，整个背景图都要被包含在元素内，没有超出的部分。
wxss样式写法WXSS (WeiXin Style Sheets) 是微信小程序中的样式语言，其语法与CSS 非常相似，但是有一些微信特定的扩展和限制。
以下是一些基本的WXSS 样式写法：1.选择器：WXSS 的选择器与CSS 的选择器基本相同，例如，你可以选择一个类名、ID 或者元素。
css.myClass {color: red;}2.盒模型：WXSS 的盒模型与标准CSS 的盒模型有所不同，它默认不包含边距和边框。
你需要使用box-sizing属性来控制盒模型的行为。
cssbox-sizing: border-box;3.尺寸单位：WXSS 使用rpx (responsive pixel) 作为尺寸单位，rpx 可以根据屏幕宽度自适应。
你还可以使用vw、vh 等视窗单位。
4.样式属性：WXSS 支持大部分CSS 属性，例如color、background-color、font-size、margin、padding等。
同时，WXSS 还支持微信特有的属性，例如flex、flex-direction、align-items等。
5.样式规则的顺序：在WXSS 中，样式的优先级由高到低依次是：内联样式> 自定义样式> 微信内置样式。
6.特殊属性：WXSS 还有一些特殊的属性，例如display、position、flex等，这些属性在微信小程序中有特殊的行为或限制。
7.条件编译：WXSS 支持条件编译，你可以使用wx:if、wx:elif、wx:else来根据条件编译不同的样式。
8.媒体查询：WXSS 也支持媒体查询，你可以根据设备的宽度、高度等来应用不同的样式。
9.样式的作用域：在微信小程序中，样式的作用域默认是组件的内部，也就是说，组件内部的样式会覆盖外部的同名样式。
以上是一些基本的WXSS 样式写法，具体的属性和语法还需要参考微信小程序的官方文档。
小程序商店提供wxss学习系列三
一：背景(Background)与颜色(Color)
一、背景：background。
设置对象的背景特性。
一个元素可以设置多重背景图像，每组之间用逗号隔开，如果存在重叠关系，前面的背景图像会覆盖在后面背景图上。
1.background-color：指定背景的颜色。
取值：正常的颜色取值。
2.background-image：背景图片。
如果设置了这个属性，最好也添加下background-color ，用于当背景image不可见时保持与文本颜色有一定的对比度
3.background-repeat：设置对象背景图如何铺排填充。
repeat-x：背景在横向上平铺。
repeat-y：背景在纵向上平铺。
repeat：背景图在横向纵向上平铺。
no-repeat：图像不平铺。
round：背景图像自动缩放直到适应且填充整个容器。
space：背景图像以相同的间距平铺且填充满整个容器或者某个方向。
space:
round:
4.background-attachment：指定对象的背景图像是随对象内容滚动还是固定的。
取值：fixed：固定位置。
scroll：相对于元素固定，跟着元素。
local：相对于元素内容固定，总是跟着内容。
5.background-position:指定对象的背景图像位置。
取值：left，right，top，bottom，center。
也可以用百分比。
6.background-size：指定对象的背景图像的尺寸大小。
取值：auto：背景图的真实大小。
cover：等比例缩放到完全覆盖容器。
有可能超出容器。
contain：将背景图等比例缩放到宽度或者高度与容器的宽度或者高度相等，始终都在容器内。
7.background-clip：指定对象的背景图像向外裁剪的区域。
取值：padding-box：从padding区域(不含padding)开始向外裁剪背景。
border-box：从border区域(不含border)开始向外裁剪背景。
content-box：从content 区域开始向外裁剪背景。
text：从前景内容的形状做为裁剪区域向外裁剪。
8.background-origin：指定对象的背景图像显示的原点。
取值：padding-box：从padding区域(不含padding)开始向外裁剪背景。
border-box：从border区域(不含border)开始向外裁剪背景。
content-box：从content 区域开始向外裁剪背景。
二、颜色：color：设置对象的文本颜色。
可使用颜色名，rgb，hex，rgba，hsl，hsla，transparent等等来设置。
opacity：设置对象的不透明度。
取值范围为0.0-1.0。
opacity：0.2
opacity：0.8
二：边框(Border)
一.边框：border 设置对象边框的特性。
1.语法：border：length style color
2.style：none ，hidden，dotted，dashed，solid，double，groove，ridge，inset，outset。
二.相关属性。
1.border-width：设置边框宽度：常用取值：medium：默认值，相当于3px。
thin：1px。
thick：5px。
不可以为负值。
2.border-color:设置边框颜色。
3.border-top:设置顶部边框。
border-top-width,border-top-style,border-top-color 分别设置宽度，样式以及颜色
4.border-right：设置右边框。
5.border-bottom：设置底边框。
6.border-left：设置左边框。
7.border-radius：设置对象使用圆角边框。
取值为数字或者百分比。
8.当然也可以给4个角单独的设置：
左上角：border-top-left-radius，右上角：border-top-right-radius，左下角：border-bottom-left-radius，右下角：border-bottom-right-radius
9.box-shadow:设置对象阴影。
第一个值：设置水平方向阴影偏移量。
第二个值：设置垂直方向阴影偏移量。
第三个值：设置对象的阴影模糊值。
不允许为负值
第四个值：设置对象的阴影外延值，不允许为负值
第五个值：color。
第六个值：inset，阴影在左上位置，如下图：box-
shadow:6rpx 6rpx 6rpx 6rpx rebeccapurple inset
10.border-image：对象的边框样式使用图片来填充。
1>border-image-source:设置图片的来源。
使用绝对或者相对地址或者渐变色来确定图片。
2>border-image-slice :设置边框背景图的分隔方式。
取值：数值/百分比fill.该属性指定从上右下左来分割图片，将图像分成4个角，4条边以及中间区域。
中间区域始终是透明的，除非使用关键字fill。
3>border-image-width:设置边框背景的宽度。
用于指定使用多厚的边框来承载呗裁剪后的图像。
4>border-image-outset：设置对象的边框背景图的扩展，意思就是说假如设置了10rpx，那么图像就会在原来基础上外延10rpx在显示。
5>border-image-repeat：设置对象的边框图片的平铺方式。
stretch:拉伸。
repeat：平铺，碰到边界的时候截断。
round：根据边框的尺寸动态调整图片的大小，使得刚好可以铺满整个边框。
space：根据边框的尺寸动态调整图片的之间的间距，使得刚好铺满整个边框。
