css背景样式

---------颜色表示方法

background: --

1) red  -- 英文单词

2) #ff0000 -- 16进制

3) rgb(255,0,0) --3元色

4) rgb(100%, 0%, 0%) --百分比

---------背景图片起始位置

background-origin: padding-box / border-box / content-box;

图片边框起始  内边距起始  内容起始

---------背景色起始位置

background-clip: boder-box / padding-box / content-box;

边框起始  内边距起始  内容起始

例: 如背景色黄色 边框起始 边框边框也为黄

---------设置背景图片大小

background-size:宽度px 高度px;

background-size: length / percentage / cover / contain;


Value


Description


length


用数值来设定图片的宽度和高度,第一个值为宽度,第二个值为高度,如果只设定一个值,那第二个被设为auto.


percentage


用百分比来设定图片的宽度和高度,第一个值为宽度,第二个值为高度,如果只设定一个值,那第二个被设为auto.


cover


以图片自身的尺寸比例来拉伸图片以封满某个元素.


contain


以图片自身的尺寸比例来拉伸或缩小图片以但某个元素能完全显示此图片

---------背景颜色

background/background-color: #000000 - #FFFFFF / red blue green… ;

---------背景插入图片

background-image: url(“地址”)/过度;

例:background-image: -webkit-linear-greadient( -- , -- , -- )

---------背景颜色图片叠加

background: red url() no-repeat -- --;

---------多背景图

background: url(‘ ’) no-repeat -- -- , url(‘ ’) no-repeat -- --/-- --;

1图片 2图片/大小

---------背景色hsl

background: hsl( h , s , l );

h: 色调 0-红 120-绿 240-兰 0-360

s: 饱和度 0-100%

l: 亮度 0-100%  0%为黑

---------背景图片平铺

background-repeat: repeat / no-repeat / repeat-x / repeat-y;

平铺/不平铺/水平平铺/垂直平铺

---------背景图片定位

background-position: 水平px  垂直px / 水平%  垂直% / 关键词(center居中);

top left / top center / top right  -a/b方位前后可互换

left center/ center center / right center

bottom left/ bottom center / bottom right

---------背景关联

background-attachment: scroll / fixed /inherit; 滚动/固定/继承

---------单选边框

border-left/top/right/bottom; 左/上/右/下

---------边框宽度

border-width:0 – 99999px;

border-width:thin medium thick 10px;

上边框是细边框

右边框是中等边框

下边框是粗边框

左边框是 10px 宽的边框

3值: 上 左右 下

2值: 上下 左右

---------边框样式

border-style: solid / dashed / double / transparent

单实线/虚线/双实线/透明

---------边框颜色

border-color: #000000 - #FFFFFF / red blue green… ;

---------border复合样式写法

border/ border-left/ … : width  style  color; 线宽 样式 颜色

border: 1px  solid  red;

---------background复合样式写法

background: url(“路径”)  repeat  position; 路径 平铺 位置

background: url(“a.jpg”)  no-repeat  center;

时间: 2024-11-02 15:42:59

css背景样式的相关文章

HTML学习笔记 CSS背景样式案例 第六节 (原创) 参考使用表

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>样式</title> <link rel="stylesheet" href="tzy.css" type="text/css"> </head> <body>

CSS设置边框、符号、背景样式、链接属性

一.CSS边框空白 padding-top:10px; /*上边框留空白*/ padding-right:10px; /*右边框留空白*/ padding-bottom:10px; /*下边框留空白*/ padding-left:10px; /*左边框留空白 二.CSS符号属性 list-style-type:none; /*不标记*/ list-style-type:decimal; /*阿拉伯数字标记*/ list-style-type:lower-roman; /*小写罗马数字标记,如:i

CSS中如何使用背景样式属性,看这篇文章就够用了

原文:CSS中如何使用背景样式属性,看这篇文章就够用了 css背景样式属性介绍# 背景样式就是自定义HTML标签的背景颜色或背景图像. 背景属性说明表 属性名 属性值 描述 background-color #f00.red.rgb(255,0,0) 设置背景颜色. background-image url(背景图片路径) 设置背景图像. background-repeat repeat.repeat-x.repeat-y.no-repeat 设置背景图片是否平铺和平铺方向. backgroun

css 字体样式设置大全

css样式大全(整理版) 字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常) 行高 {line-height: normal;}(正常) 单位:PX.PD.EM 粗细 {font-weight: bold;}(粗体) lighter;(细体) normal;(正常) 变体 {fo

CSS元素、边框、背景样式

一.元素样式 1.width控制元素宽度 2.height控制元素宽度 3.padding控制元素内边距 内容与边框之间的距离 4.margin控制元素外边距 元素边框与其他元素边框之间的距离,如果两元素都设置了margin属性,浏览器只   对较大值有效. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></

CSS基本样式-背景属性

代码是敲出来的,建议一个一个过一遍 背景属性 背景颜色 background-color 背景颜色 默认值是transparent(透明的) 示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS基本样式</title> <style> body{ height: 1000px; /

繁星CSS3之旅-CSS基本样式-CSS背景

CSS背景 1.背景 CSS允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果 (1)设置背景颜色 例: <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="styl

CSS常用字体属性(多出的文本隐藏,或者以省略号的形式显示)和背景样式以及背景图的2个不常用属性:background-origin和background-clip

(一)常用的字体属性: font-weight: 属性值100-900  400等于正常 700等于bold ,数值越大,越粗 font-size:字体大小,单位可以为px或者% font-family:字体族 比如说:微软雅黑 font-style:字体的样式 italic斜体 normal正常 font-variant:small-caps 将字母转化为小一号的大小字母 注意:所有属性也可以通过font一个属性写,例如: font:italic bold 75%/1.8 'Microsoft

DIV CSS Sprites精灵 CSS图像拼合 CSS背景贴图定位教程案例

div css sprites精灵-CSS图像拼合 CSS贴图定位网页背景素材图片拼合定位布局技术教程篇与css sprites实例篇 css sprites拼合背景图片素材实现布局效果截图 一.什么是css sprites   -   TOP css sprites直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.其实就是通过将多个图片融合到一张图里面,然后通过CSS background背景定位技术技巧布局网页背景.这样做的好处也是显而易见的,因为图片多的话,会增加