标签：enter 就是 默认 type 溢出 默认值 meta content ima
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>CSS初识(十二)——背景</title> <style> .box1{ /*设置宽度和高度*/ width: 1000px; height: 680px; /*设置背景颜色*/ background-color: #bbffaa; /*设置背景图片*/ background-image: url("https://api.13miki.com/img.php"); /*设置背景图片尺寸大小*/ background-size: contain; /*设置背景图片重复方式*/ background-repeat: no-repeat; /*设置背景图片位置*/ background-position: 0 0; /*偏移量设置*/ /*设置背景填充范围*/ background-clip: padding-box; /*设置背景图片位置中偏移量设置法的参考原点*/ background-origin: content-box; /*设置边框样式*/ border: 5px double #e12914; /*设置内边距*/ padding: 10px; /*隐藏溢出*/ overflow: auto; } .box2{ /*设置宽度和高度*/ height: 1000px; width: 250px; /*设置背景颜色*/ background-color: #e12914; /*设置背景图片*/ background-image: url("https://api.13miki.com/img.php"); /*设置背景图片尺寸大小*/ background-size: 100%; /*设置背景图片重复方式*/ background-repeat: no-repeat; /*设置背景图片跟随元素移动*/ background-attachment: scroll; } /* background-color 设置背景颜色 可选值： 颜色英文名 rgb #号代码(简写rgb) background-image 设置背景图片 - 可以同时设置背景颜色和图片，这样背景颜色将会成为图片的背景色 - 如果背景的图片小于元素，则背景图片会自动在元素中平铺将元索铺满 - 如果背景的图片大于元素，将会一个部分背景无法完全显示 - 如果背景图片和元素样大，则会直接正常显示 background-repeat 设置背景的重复方式 可选值： repeat：默认值，背景会沿着x轴y轴双方向重复 repeat-x：沿着x轴方向重复 repeat-y：沿着y轴方向重复 no-repeat：不重复 background-position 设置背景图片的位置 可选值： 通过top left right bottom center 几个表示方位的词来设置背景图片的位置 使用方位词时必须要同时指定两个值，如果只写一个则第二个默认就是center 通过偏移量来指定背景图片的位置: 水平方向的偏移量 垂直方向变量 background-clip 设置背景的范围 可选值： border-box：默认值，背景会出现在内容区、内边距和边框的下边 padding-box：背景只会出现在内容区和内边距 content-box：背景只会出现在内容区 background-origin 背景图片的偏移量计算的原点 可选值： padding-box：默认值，background-position从内边距处开始计算 content-box：背景图片的偏移量从内容区处开始计算 border-box：背景图片的的偏移量从边框处开始计算 background-size 设置背景图片的尺寸大小 可选值： (宽度) (高度) 可同时写，如果只写一个，则另一个等比例缩放 单位可以是px、百分比也可以是auto cover：图片比例不变，将元素铺满 contain：图片比例不变，将图片在元素中完整显示 background-attachment 设置背景图片是否跟随元素移动 可选值： scroll：默认值背景图片会跟随元素移动 fixed：背景会固定在页面中，不会随元素移动 background 简写属性，所有相关样式都可以在里面写，参数之间没有顺序要求，并空格隔开 注意： size属性必须要写在position后面，并用/隔开：position/size origin属性必须写在clip属性前面 */ </style> </head> <body> <div class="box1"> <div class="box2"> 道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。 道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。 道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。 </div> </div> </body> </html>
代码效果：
标签：enter 就是 默认 type 溢出 默认值 meta content ima
原文地址：https://www.cnblogs.com/lyrebirth-world/p/12787654.html
