【CSS】背景

background-color 颜色

<style>div{width: 200px;height: 100px;/* 颜色格式 */background-color: pink;background-color: #25fd0d;background-color: rgb(160, 38, 208);background-color: rgba(0, 51, 255, 0.9);}
</style>
<div></div>

效果:

background-image 图像

<style>/* 这个CSS伪类匹配文档树的根元素 */:root {/* 声明全局 CSS 变量 */--bg-url: url("./day5/myy.jpg");}div{width: 200px;height: 100px;border: 1px solid #0022ff;background-size:contain ;/* 可以将图片的URL指定为变量 */background-image: var(--bg-url);/* 单个背景图 */background-image: url("./day5/xmm.jpg");/* 多个背景图片可以用逗号分隔 */background-image: url("./day5/xmm.jpg"), url("./day5/myy.jpg");}
</style>
<div></div>

效果:

background-size 缩放

设置背景图片的尺寸，可以按照指定的比例缩放图片

<style>div{width: 170px;height: 150px;border: 1px solid #0022ff;float: left;margin-left: 10px;background-image: url("./day5/xmm.jpg");background-repeat: no-repeat;}div:nth-of-type(1){/*百分比值（相对于父元素，如：宽度50% 高度100%；如果只设置一个值，则第二个值会被设置为 "auto"）具体的像素值（如：宽度20px 高度30px；同上）*/background-size: 300px 300px;}div:nth-of-type(2){background-size: auto; /* auto（默认值，保持图像的原始尺寸）*/}div:nth-of-type(3){background-size: cover; /* cover（图片的比例不变，图片将元素铺满；图像可能会有部分无法显示）*/}div:nth-of-type(4) {background-size: contain; /* contain（图片比例不变，将图片完整显示，背景区域可能会有部分无法被图像覆盖）*/}
</style>
<div></div><div></div><div></div><div></div>

效果:

background-repeat 平铺

<style>div{width: 300px;height: 200px;border: 1px solid #0022ff;background-image: url("./day5/xmm.jpg");background-size: contain;/* no-repeat：不平铺，repeat：平铺（默认），repeat-x：水平平铺，repeat-y：竖直平铺 */background-repeat: repeat;}
</style>
<div></div>

效果:

background-position 定位

<style>div{width: 300px;height: 260px;border: 1px solid #0022ff;background-image: url("./day5/xmm.jpg");background-repeat: no-repeat;/* 水平(正数向右，负数向左)和垂直(正数向下，负数向上)方向上的位置，默认背景图片的左上角与容器的左上角对齐 *//* left左侧，right右侧，center居中，top顶部，bottom底部 */background-position: -120px 40%;/* 如果只指定一个值，则另一个值默认为50%，表示居中对齐 */background-position: center;background-position: -290px -270px;}
</style>
<div></div>

效果:

background-clip 裁剪区域

定义背景的裁剪区域，裁剪到指定的区域内显示。可同时控制背景图和背景色的显示范围。background-color 的填充是从边框的的左上角到右下角；background-image 的填充是从边框内部开始的（此时border有10px）也就是padding的左上角顶点开始的。

<style>div{width: 120px;height: 100px;padding: 20px;margin-right: 10px;border: 10px dashed #0022ff;float: left;background-size: 200px 200px;background-repeat: no-repeat;/* 对比background-clip属性对 背景图 和 背景色 的控制 */background-image: url("./day5/xmm.jpg");background-color: #ff00cc;}#div1{background-clip: border-box; /* border-box：默认，裁剪到边框区域内 */}#div2{background-clip: padding-box; /* padding-box：裁剪到 padding 区域内 */}#div3{background-clip: content-box; /* content-box：裁剪到内容区域内 */}
</style>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

效果:

文字裁剪

<style>#div4{height: 50px;line-height: 50px;border: 10px dashed #0022ff;font-size: 25px;font-weight: bolder;background-size: auto 100%;background-image: url("./day5/xmm.jpg");text-align: center;/* 对文字区域进行裁剪 */-webkit-background-clip: text;/* 覆盖掉原本文字的颜色，并填充设置为透明 */-webkit-text-fill-color: transparent;}
</style>
<div id="div4">千里之行，始于足下，愿将来胜过往</div>

效果:

background-origin 开始区域

用于指定背景图像 background-image 的原点（左上角）位置相对于元素的哪个位置开始显示。针对与背景图，只能控制背景图

<style>div{width: 120px;height: 100px;border: 10px dashed #0022ff;padding: 20px;float: left;margin-left: 10px;background-repeat: no-repeat;background-size: 200px 200px;/* 对比background-origin属性对 背景图 和 背景色 的控制 */background-image: url("./day5/xmm.jpg");background-color: #ff00cc;}div:nth-of-type(1){background-origin: border-box; /* border-box：图片从边框区域开始显示 */}div:nth-of-type(2){background-origin: padding-box; /* padding-box：图片从 padding 区域开始显示 */}div:nth-of-type(3){background-origin: content-box; /* content-box：图片从内容区域开始显示 */}
</style>
<div></div><div></div><div></div>

效果:

background-attachment 滚动方式

用于设置背景图像是否固定或随着页面滚动而滚动

<style>body{height: 1500px;background-image: url("./day5/xmm.jpg");/*scroll: 默认值，背景图像随着页面滚动而滚动fixed: 背景图像固定，不随页面滚动而滚动local: 背景图像相对于元素滚动，而不是页面滚动（当元素本身可以滚动时，这个属性很有用）*/background-attachment: fixed;}#div1{width: 200px;height: 300px;border: 1px solid #0022ff;color: white;overflow-y: scroll;background-image: url("./day5/xmm.jpg");background-size: contain;background-repeat: repeat;background-attachment: local;}
</style>
<div id="div1"><h3>测试文字</h3><h3>测试文字</h3><h3>测试文字</h3><h3>测试文字</h3><h3>测试文字</h3><h3>测试文字</h3><h3>测试文字</h3><h3>测试文字</h3><h3>测试文字</h3><h3>测试文字</h3>
</div>

效果: