- background-color 颜色
- background-image 图像
- background-size 缩放
- background-repeat 平铺
- background-position 定位
- background-clip 裁剪区域
- background-origin 开始区域
- background-attachment 滚动方式
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>
效果:
