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>
效果:
mask 遮罩层
在不同浏览器中可能需要添加厂商前缀 (
-webkit-针对 Chrome 、Safari 和 新版Edge ；-moz-针对 Firefox ) ；可以遮罩或者裁切特定区域的图片，所谓遮罩，就是原始图片只显示遮罩图片非透明的部分 (图像文件( JPG 、PNG 、SVG 等不同格式，可通过URL直接引用) ，包括各种渐变) ；用法 mask 和 background 是相似的
| 属性 | 说明 |
|---|---|
mask-image | 遮罩的图像源，定义一个或多个遮罩图像，这些图像的不透明度值决定了元素的哪些部分应该显示或隐藏 none ( 默认，没有遮罩 )；url ( 指向遮罩图像 )；gradient ( 渐变 ) |
mask-repeat | 控制遮罩图像是否重复以及如何重复 repeat ( 默认，水平和垂直平铺 )repeat-x 或 repeat-y ( 水平 x 或 y 平铺 )no-repeat ( 不平铺 )space ( 遮罩图片尽可能的平铺，同时不发生任何剪裁 )round ( 遮罩图片尽可能靠在一起没有任何间隙，同时不发生任何剪裁遮罩图片，但可能会有比例的缩放 ) |
mask-position | 遮罩图像在元素背景坐标系统中的初始位置0% 0% ( 默认 )；top；bottom；left；right；center；百分比；长度值 |
mask-size | 控制遮罩图像的大小 auto ( 默认 )；cover； contain；长度值；百分比等 |
mask-clip | 定义遮罩图像的作用区域border-box (默认)；padding-box；content-box；fill-box；stroke-box；view-box；no-clip |
mask-origin | 定义遮罩图片绘制的起点位置border-box (默认)；padding-box；content-box；fill-box；stroke-box；view-box |
mask-composite | 当多个遮罩图像应用于同一元素时，遮罩图像的叠加方式add ( 默认，遮罩累加 )；subtract ( 遮罩相减 )；intersect ( 遮罩相交 )；exclude ( 遮罩排除相交的部分 ) |
mask-mode | 遮罩图像中颜色通道的处理方式alpha ( 默认，基于透明度遮罩 )luminance ( 基于亮度遮罩 )match-source ( 根据资源的类型自动采用合适的遮罩模式 ) |
图片重叠遮罩过渡 \ png图片遮罩 \ SVG图形遮罩 \ 渐变图像遮罩
<style>
img,div {width: 200px;height: 200px; display: inline-block;}
/* 多张图片重叠遮罩过渡 */
.mask-image-two {
background: url(./day5/dlam.jpg);
background-size: cover;
position: relative;
}
.mask-image-two::before {
content: "";
position: absolute;
top: 0;left: 0; right: 0;bottom: 0;
background: url(./day5/myy.jpg); background-size: cover;
/* 两张图片过渡渐变切换的效果 */
mask:linear-gradient(45deg, #000 40%, transparent 60%);
}
/* png图片遮罩 */
.mask-image-png{
/* 当指定一个图像文件作为遮罩时，只有该图像的非透明部分会允许元素内容显示 */
-webkit-mask-image: url(./day5/bangding.png);
mask-image: url(./day5/bangding.png);
mask-size: 50px 50px;
}
/* SVG图形遮罩 */
.mask-image-svg {
-webkit-mask-image: url(./day5/xuehua.svg);
mask-image: url(./day5/xuehua.svg);
mask-size: 50px 50px;
}
/* 渐变图像遮罩 */
.mask-image-gradient{
/* 半透明：#808080 或者 透明度0.5 */
/*mask-image: repeating-radial-gradient(#808080 0%, rgba(0, 0, 0, 0.5) 100%); */
mask-image: repeating-radial-gradient(rgba(0,0,0,0) 5px, rgba(0, 0, 0,1) 20px, rgba(0,0,0,0) 30px);
mask-size: 50px 50px;
}
</style>
<div class="mask-image-two"></div>
<img src="./day5/dlam.jpg" class="mask-image-png">
<img src="./day5/dlam.jpg" class="mask-image-svg">
<img src="./day5/dlam.jpg" class="mask-image-gradient">
效果:
mask-composite：叠加方式
<style>
div {
width: 200px;height: 200px;display: inline-block;
background-image: url("./day5/dlam.jpg");background-size: cover;
/* 多个遮罩 */
-webkit-mask-image: url(./day5/bangding.png),url("./day5/a.png");
mask-image: url(./day5/bangding.png),url("./day5/a.png");
mask-size: contain;
}
/* 叠加方式 ( 默认，add累加显示 ) */
.mask-composite-subtract{
mask-composite: subtract; /* 遮罩图片重合的地方不显示 */
}
.mask-composite-intersect{
mask-composite: intersect; /* 遮罩图片重合的地方才显示 */
}
.mask-composite-exclude{
mask-composite: exclude; /* 遮罩图片重合的地方排除，当作透明处理 */
}
</style>
<div></div>
<div class="mask-composite-subtract"></div>
<div class="mask-composite-intersect"></div>
<div class="mask-composite-exclude"></div>
效果:
clip-path 剪切区域
使用裁剪
需要一个剪切路径，剪切路径可以是一个闭合矢量路径 、形状或多边形，创建元素的可显示区域，区域内的部分显示，区域外的隐藏。浏览器会裁剪掉裁剪区域以外的内容(包括：背景 、内容 、边框 、阴影等，另外也不会捕获裁剪区域之外的 hover 、click 等事件)
| 函数 / 值 | 描述 | 参数 |
|---|---|---|
inset() | 矩形 / 带圆角的矩形 | 矩形的上右下左顶点到被剪裁元素边缘的距离，圆角为可选参数 |
circle() | 圆形 | 半径和圆心的坐标 |
ellipse() | 椭圆 | 横轴半径和纵轴半径以及圆心的坐标 |
polygon() | 多边形 | 构成多边形的一系列定点坐标 |
path() | SVG路径定义任意形状 | 路径的字符串表达形式 |
url() | 引用一个SVG的 clipPath 元素来作为剪裁路径 | clipPath 元素ID名 |
geometry-box | 单独使用时会将指定框的边缘作为剪裁路径；若配 合 basic-shape 使用，用于定义裁剪元素的参考框盒 | margin-box \ border-box \ padding-box \ content-box fill-box \ stroke-box \ view-box 一般和basic-shape一起使用 |
<style>
div {
width: 200px;height: 200px;display: inline-block;
background-image: url("./day5/dlam.jpg");
background-size: cover;
}
/* inset() 矩形或带圆角的矩形 */
.inset{
clip-path: inset(10px 10% 10px 10% round 20px);
}
/* circle() 圆形 */
.circle{
clip-path: circle(60px at 100px 150px);
}
/* ellipse() 椭圆 */
.ellipse{
clip-path: ellipse(80px 50px at center);
}
/* polygon() 多边形 */
.polygon{
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
/* path() 任意形状的svg路径 */
.path{
-webkit-clip-path: path("M100,0 L0,200 L200,200");
}
/* url() 使用SVG的 clipPath 元素来作为剪裁路径 */
.url{
clip-path: url("#clip");
}
/* geometry-box 几何框 (参考框) */
.geometry-box{
margin: 20px; box-sizing: border-box;
clip-path:margin-box circle(50%);
}
</style>
<div></div>
<div class="inset"></div>
<div class="circle"></div>
<div class="ellipse"></div>
<div class="polygon"></div>
<div class="path"></div>
<div class="url">
<svg height="200" width="200">
<defs>
<clipPath id="clip">
<path d="M 10,30
A 20,20 0,0,1 50,30
A 20,20 0,0,1 90,30
Q 90,60 50,90
Q 10,60 10,30 z">
</path>
</clipPath>
</defs>
</svg>
</div>
<div class="geometry-box"></div>
效果:
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
