下载文档原格式
CSS背景图像background属性简写background属性简写background属性可以像margin padding属性⼀样，有简写⽅法，它的简写顺序是：1. background-color2. background-image3. background-repeat4. background-attachment5. background-position如果某属性不想写，可以忽略。
下⾯的代码演⽰了background属性简写的⽤法。
<!DOCTYPE html><html><head><title>background简写</title><style type="text/css">body {background: url("") no-repeat center top;color: #665544;padding: 20px;}h1 {color: white;}</style></head><body><h1>软件开发，成就梦想</h1><h2>学编程，上利永贞⽹ </h2><p>我们能为中国‘996’程序员做些什么？怎样才能能引起西⽅媒体和政府的关注？</p><p>在程序员圈⼦⾥颇有名⽓的代码托管平台GitHub上，有⼈发起了⼀个名为“996.ICU”的项⽬，意为“⼯作996，⽣病ICU”，“996”即许多企业的程序员⼯作状态，从上午9点⼲到晚上9点，每周⼯作6天。
这⼀项⽬得到了⼤量程序员的响应，⾃从3⽉26⽇注册以来，截⾄4⽉2⽇Star数已突破15万整数关⼝，表⽰⾄少有15万名程序员关注了这个项⽬。
</p></body></html>。
微信⼩程序图⽚绝对定位（背景图⽚）微信⼩程序图⽚绝对定位前⾔：在⼩程序中，有时需要⽤到背景图⽚，但是如果使⽤background-image的话，就⽆法控制图⽚的⼤⼩，background-image⼀般⽤于将图⽚压缩为1像素的背景图⽚，然后⾃动填充铺满。
使⽤背景图⽚的话，⼀般使⽤⼀些新的view层，如<image class="jxlogo" src="../../image/jx.png"/>等，但是⼩程序与html类似，⼀个不同的 css或wxss会占据⼀个位置，然后接下来的css或wxss会⾃动往下排版，但是很多时候这并不是我们想要的，于是需要⽤的绝对定位。
使⽤绝对定位，最好使⽤⼀个新的wxss将所有⼦控件包含起来，然后在这个包含所有⼦控件的wxss中，定义⼀个属性position: relative，在每个⼦控件中，定义 position: absolute，现在就可以通过绝对定位来修改位置，如top等，以下附上部分wxss代码：.jx_card{width: 100%;height: 295rpx;background-color:#e6e6e6;position: relative}.jxlogo{top: 47.5rpx;margin-left: 50rpx;width: 200rpx;height: 200rpx;float: left;position: absolute;}然后附上wxml代码：<view class="jx_card"><image style="width: 740rpx; height: 275rpx;margin-left=10rpx;margin-top:10rpx;" mode="{{item.mode}}" src="../../image/优惠券_03.png"><image class="jxlogo" src="../../image/jx.png"/></image></view>⼤概内容就是这样，主要是通过position先定义定位的类型，然后通过top去找到图⽚上的位置，并定义上去。
CSS常用样式属性大全1. 文本属性- `color`：设置文本颜色- `font-size`：设置字体大小- `font-family`：设置字体系列- `font-weight`：设置字体粗细- `text-align`：设置文本对齐方式- `text-decoration`：设置文本装饰（如下划线、删除线等）- `text-transform`：设置文本大小写转换2. 背景属性- `background-color`：设置背景颜色- `background-image`：设置背景图片- `background-repeat`：设置背景图片的重复方式- `background-position`：设置背景图片的位置- `background-size`：设置背景图片的尺寸3. 边框属性- `border`：设置元素边框样式、宽度和颜色- `border-radius`：设置元素边框的圆角- `border-color`：设置元素边框的颜色- `border-width`：设置元素边框的宽度4. 布局属性- `display`：设置元素的显示方式（如块级、内联等）- `width`：设置元素的宽度- `height`：设置元素的高度- `margin`：设置元素外边距- `padding`：设置元素内边距- `float`：设置元素的浮动方式5. 盒模型属性- `box-sizing`：设置元素的盒模型计算方式- `overflow`：设置元素溢出内容的处理方式- `position`：设置元素的定位方式- `top`：设置定位元素的上边距- `bottom`：设置定位元素的下边距- `left`：设置定位元素的左边距- `right`：设置定位元素的右边距以上是CSS中常用的样式属性，通过合理使用这些属性可以实现各种各样的页面效果。
在编写CSS代码时，建议将样式属性单独分行展示，以增加代码的可读性和维护性。
css属性大全CSS属性大全。
CSS（Cascading Style Sheets）是一种用来为网页添加样式和布局的样式表语言。
它可以控制网页的字体、颜色、间距、边框、背景等各种样式，是网页设计中不可或缺的一部分。
在这篇文档中，我们将详细介绍CSS中的各种属性，帮助您更好地掌握CSS的应用。
1. 字体属性。
字体属性用于设置网页中文本的字体样式、大小、粗细等。
常用的属性包括font-family（设置字体系列）、font-size（设置字体大小）、font-weight（设置字体粗细）、font-style（设置字体样式）等。
2. 文本属性。
文本属性用于设置文本的对齐方式、行高、间距等。
常用的属性包括text-align（设置文本对齐方式）、line-height（设置行高）、letter-spacing（设置字符间距）、word-spacing（设置单词间距）等。
3. 背景属性。
背景属性用于设置网页元素的背景样式。
常用的属性包括background-color（设置背景颜色）、background-image（设置背景图片）、background-repeat（设置背景重复方式）、background-position（设置背景位置）等。
4. 边框属性。
边框属性用于设置网页元素的边框样式。
常用的属性包括border-width（设置边框宽度）、border-style（设置边框样式）、border-color（设置边框颜色）、border-radius（设置边框圆角）等。
5. 盒模型属性。
盒模型属性用于设置网页元素的尺寸、内边距、外边距等。
常用的属性包括width（设置元素宽度）、height（设置元素高度）、padding（设置内边距）、margin（设置外边距）等。
6. 定位属性。
定位属性用于设置网页元素的位置。
常用的属性包括position（设置定位方式）、top（设置元素顶部位置）、left（设置元素左侧位置）、z-index（设置元素层级）等。
关于background-image调整⼤⼩和位置的⽅法笔记遇到background-image的问题有点多，直接上⽹搜资料⾃⼰整理⼀下<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>#divtest{width:400px;height:400px;background-color: aqua;background-image: url("img/2.jpg");/*background: url("img/2.jpg") 10% 20% no-repeat;!*图⽚从左往右移动的百分⽐⼤⼩，从上往下百分⽐⼤⼩，重复⽅式换成数值同样如此，在这⾥没有调整⼤⼩的⽅法*!*/background-position: 10% 40%;/*这个是按从左往右，从上往下的百分⽐位置进⾏调整*/background-size: 50% 50%;/*按⽐例缩放*//*background-size: 100px 100px;!*这个是按数值缩放*!*/background-repeat: no-repeat;/*还有repeat-x,y等*/}</style></head><body><div id="divtest"></div></body></html>。
css中元素定位方法
在CSS中，元素的定位方法主要有以下几种：
1.静态定位：这是元素的默认定位方式，元素按照正常的文档流进行排列。
使用position: static
属性设置。
2.相对定位：元素相对于其正常位置进行定位，因此“left:20px”会使元素向右移动20px。
相对定位
的元素不会脱离文档流，因此会占据空间。
使用position: relative属性设置。
3.绝对定位：元素相对于最近的已定位父元素（即设置了position: absolute或position: relative
的父元素）进行定位。
如果没有已定位的父元素，那么元素相对于初始包含块（通常是html元素）进行定位。
绝对定位的元素会脱离文档流，不占据空间。
使用position: absolute属性设置。
4.固定定位：元素相对于浏览器窗口进行定位，即使在滚动页面时，它也不会移动。
固定定位的元
素不脱离文档流，但会根据其设置的偏移量从正常位置偏移。
使用position: fixed属性设置。
以上四种定位方式各有特点，可以根据具体需求选择使用。
CSS——静态定位，相对定位，绝对定位，固定定位CSS中的定位使⽤来布局的熟练应⽤对页⾯美化有很好的帮助，下⾯就进⾏详细介绍：定位分为静态定位，相对定位，绝对定位，固定定位这四种，定位有不同的参数，例如：left、right、top、bottom、z-index等。
1、静态定位（static）⼀般的标签元素不加任何定位属性都属于静态定位，在页⾯的最底层属于标准流。
2、绝对定位（absolute）绝对定位的元素从⽂档流中拖出，使⽤left、right、top、bottom等属性相对于其最接近的⼀个最有定位设置的⽗级元素进⾏绝对定位，如果元素的⽗级没有设置定位属性，则依据 body 元素左上⾓作为参考进⾏定位。
绝对定位元素可层叠，层叠顺序可通过 z-index 属性控制，z-index值为⽆单位的整数，⼤的在上⾯，可以有负值。
绝对定位的定位⽅法：如果它的⽗元素设置了除static之外的定位，⽐如position:relative或position:absolute及position:fixed，那么它就会相对于它的⽗元素来定位，位置通过left , top ,right ,bottom属性来规定，如果它的⽗元素没有设置定位，那么就得看它⽗元素的⽗元素是否有设置定位，如果还是没有就继续向更⾼层的祖先元素类推，总之它的定位就是相对于设置了除static定位之外的定位的第⼀个祖先元素，如果所有的祖先元素都没有以上三种定位中的其中⼀种定位，那么它就会相对于⽂档body来定位（并⾮相对于浏览器窗⼝，相对于窗⼝定位的是fixed）。
将class="two"的div定位到距离的顶部和左侧分别50px的位置。
会改变其他元素的布局，不会在此元素本来位置留下空⽩。
3、相对定位（relative）相对定位元素不可层叠，依据left、right、top、bottom等属性在正常⽂档流中偏移⾃⾝位置。
同样可以⽤z-index分层设计。
css属性（cssproperties）css属性（css properties）CSS properties DaquanFont properties: (font)Size font-size: X-LARGE; (large) XX-Small; (minimal) general Chinese can not be used, as long as the value can be, units: PX, PDStyle font-style: oblique; (partial italic) Italic; (italic) normal; (normal)Line height line-height: normal; (normal) units: PX, PD, EM The thickness of font-weight: (BOLD) bold; lighter; normal; (Figure) (normal)Variant font-variant: small-caps; (small capitalization) normal; (normal)Case text-transform: capitalize; (initial uppercase) uppercase; (uppercase) lowercase; (lower case) none; (no)Modify text-decoration: underline; (underline) overline; (line up) line-through; (delete line) blink; (blinking)Commonly used fonts: (font-family)"Courier, New", Courier, monospace, Times, New, Roman, Times, serif, Arial, Helvetica, sans-serif, VerdanaFont projection effect: filter:dropshadow (color=#FFFFFF, offx=1, offy=1, positive=1);Background properties: (background)Color background-color: #FFFFFF;Picture background-image:, URL ();Repeat background-repeat: no-repeat;Scroll background-attachment: fixed; (fixed) scroll; (scroll)Position background-position: left (horizontal) top (vertical);Shorthand method, background:#000, URL (...) repeat, fixed, left, top;Block properties: (Block)Word spacing letter-spacing: normal; numeric valueYes, Liu text-align: justify; (align at the end) left; (left aligned) right; (right aligned) center; (centered)Indent the text-indent: value px;Vertically aligned vertical-align: baseline; (baseline) sub; (subscript) super; (subscript) top; text-top; middle; bottom; text-bottom;Word spacing word-spacing:, normal; numerical valueSpace white-space: pre; (reserved) nowrap; (no line feed)Display:block (block); inline; list-item; (embedded) (list) run-in (additional); compact (compact); marker; table;inline-table (marker); table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group;table-column; table-cell; table-caption; (table title)Box properties: (Box)Width:; height:; float:; clear:both; padding:; margin:; order: right, left, leftBorder properties: (Border)Border-style: dotted; (dot line) dashed; (dotted line) solid; double; (double line) groove; (slot line) ridge; (ridged) inset; (SAG) outset;Border-width:; border widthBorder-color:#;Shorthand method border:width, style, color;List properties: (List-style)Type list-style-type: disc; (DOT) circle; (circle) square;(Fang Kuai) decimal; (number) lower-roman; (Ronaldinhonumber) upper-roman; lower-alpha; upper-alpha;Location list-style-position: outside; (external) inside;Image list-style-image:, URL (...);Location attributes: (Position)Position: absolute; relative; static;Visibility: inherit; visible; hidden;Overflow: visible; hidden; scroll; auto;Clip:, Rect (12px, auto, 12px, auto) (cut)CSS property code GuinnessOne CSS text property:Color: #999999; / * * / text colorFont-family: Arial, sans-serif; / * * / text fontFont-size: 9pt; / * * / text sizeFont-style:itelic; / * * / italic textFont-variant:small-caps; / * * / small fontLETTER-SPACING: 1pt; / * * / distance between wordsLine-height: 200%; / * * / set the rowFont-weight:bold; / * * / bold textVertical-align:sub; / * * / word.Vertical-align:super; / * * / word.Text-decoration:line-through; / * * / strikethroughText-decoration:overline; / * and * / top lineText-decoration:underline; / * * / underlineText-decoration:none; / * * / delete link underlineText-transform: capitalize; / * * / first character uppercase 文本转换：大写；/ * * /英文大写文本转换：小写；/ * * /英文小写文本对齐：右；/ * * /文字右对齐文本对齐：左；/ * * /文字左对齐文本对齐：中心；文字居中对齐/ * * /文本对齐：对齐；/ * * /文字分散对齐垂直对齐属性垂直对齐：顶；/ * * /垂直向上对齐垂直对齐：底部；/ * * /垂直向下对齐垂直对齐：中部；/ * * /垂直居中对齐垂直对齐：文字/ * * /文字垂直向上对齐顶；垂直对齐：文字/ * * /文字垂直向下对齐底；布局：垂直流/ * * /文字竖着排列表意二、CSS边框空白填料：10px；/ * * /上边框留空白填充右：10px；/ * * /右边框留空白座垫：10px；/ * * /下边框留空白填充左：10px；/*左边框留空白三、CSS符号属性：目录样式类型：无；/ * * /不编号目录样式类型：十进制；/ * * /阿拉伯数字目录样式类型：低/ * * /小写罗马数字罗马；目录样式类型：大写罗马数字；/ * * /大写罗马数字目录样式类型：低α；/ * * /小写英文字母目录样式类型：上α；/ * * /大写英文字母目录样式类型：盘；/ * * /实心圆形符号目录样式类型：圆；/ * * /空心圆形符号目录样式类型：广场；/ * * /实心方形符号列表样式图像：URL（/点。
CSS中背景图片的定位
作者：请叫我二狗哥
假若设计图效果如下图所示，背景图片定位在元素的距离右侧边缘15px、底部边缘8px， div元素背景颜色#9cbbbe。
想要通过CSS代码实现这种背景图片定位效果，可以通过不同的属性方案实现。
一、backgrond-position方案
div {
/* 核心样式 */
background:#9cbbbe url(./GreyWolf-alpha.png) no-repeat ;
background-position:right15px bottom8px;
/* 外围样式 */
width:500px;
height:400px;
}
若是要考虑不支持background-position属性的早期浏览器兼容性问题，可以做一个恰当的回退方案：
div {
/* 回退方案 */
background:#9cbbbe url(./GreyWolf-alpha.png) no-repeat ri ght bottom ;
/* 核心样式 */
background-position: right15px bottom8px;
/* 外围样式 */
width:500px;
height:400px;
}
在不支持background-position属性的浏览器中背景图片置于右下角，否则没有回退机制，背景图片会置于默认右上角。
不考虑回退机制可以采用简写方式的代码，不太推荐这种写法，因为若浏览器不兼容简写属性，将导致整个样式丢失不支持：
div {
/* 核心样式 */
background:#9cbbbe url(./GreyWolf-alpha.png) no-repeat ri ght15px bottom8px ;
/* 外围样式 */
width:500px;
height:400px;
}
二、background-origin方案
div {
/* 核心样式 */
background: #9cbbbe url(./GreyWolf-alpha.png) no-repeat rig ht bottom;
padding: 10px15px;
background-origin: content-box;
/* 外围样式 */
width: 470px;
height: 380px;
}
background-origin属性用于控制背景位置区域，默认值为padding-box，表示背景图片是以内间距盒（padding-box）相关进行绘制。
背景源设置为content-box是背景图片以内容盒（content-box）相关进行绘制。
background-origin并不影响背景颜色（background-color）,若需要对背景颜色范围进行控制，可以使用背景剪切属性（background-clip）。
三、calc()方案
div {
/* 核心样式 */
background: #9cbbbe url(./GreyWolf-alpha.png) no-repeat;
background-position: calc(100% - 15px) calc(100% - 10px);
/* 外围样式 */
width: 500px;
height: 400px;
}
基于calc()函数计算背景图片的位置。
需要注意在calc()计算时，数值与减号“-”之间必须有空格。
1、在background-position中百分比数值代表什么含义？
W3C官网中对background-position百分比数值有如下规定：
A percentage for the horizontal offset is relative to (width of background positioning area - width of background image). A percentage for the vertical offset is relative to (height of background positioning area - height of background image), where the size of the image is the size given by background-size.
For example, with a value pair of 0% 0%, the upper left corner of the image is aligned with the upper left corner of, usually, the box’s padding edge. A value pair of 100% 100% places the lower right corner of the image in the lower right corner of the area. With a value pair of 75% 50%, the point 75% across and 50% down the image is to be placed at the point 75% across and 50% down the area.
译文：
水平偏移设置为百分比值，相对于（背景定位区域的宽度-背景图像的宽度）。
垂直偏移的百分比是相对于（背景定位区域的高度-背景图像的高度）的，其中图像的大小是由background-size给出的大小。
例如，值对为0％0％时，图像的左上角通常与框的内间距边缘的左上角对齐。
100％100％的值对将图像的右下角放置在该区域的右下角。
使用值为75％50％的值对时，图像的75％跨度和50％向下的点将放置在区域的75％跨度和50％的点下。
W3C官网中的英文介绍的核心就是background-position属性中的百分比数值是将背景图片中的点与背景定位区域的点进行对应数值的映射来进行定位。
即背景图片中自身宽度75%、高度50%的点对应背景定位区域宽度75%、高度50%
的点来实现定位。
以上图为示例进行实例扩展。
矩形区域ABCD代表背景定位区域，矩形abcd代表背景图片大小。
在实例中AB=356px,AD=236px,ab=236px,ad=118px。
在background-position:75%50%; 值的渲染计算时，其等价像素计算值可以如下换算（即a点到AB、AD的距离）：水平方向距离=AB*75%-ab*75%
代入数值 356*75%-236*75%=90
垂直方向距离= AD*50%-ad*50%
代入数值 236*50%-118*50%=59
即上面实例中的background-position:75%50%;等价于background-position:90px59px;
通过代码进行模拟在浏览器中是完全等效的：
div {
/* 核心样式 */
background: #9cbbbe url(./greenPic.png) no-repeat;
/* 外围样式 */
width: 356px;
height: 236px;
/* background-position: 75% 50%; */
background-position: 90px59px; }。
