h5学习笔记之css3新增背景属性

最新推荐文章于 2023-02-08 17:51:07 发布

no的征程

最新推荐文章于 2023-02-08 17:51:07 发布

阅读量231

点赞数

分类专栏： H5

本文链接：https://blog.csdn.net/qq_39773416/article/details/99845660

版权

H5 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一、background-size 背景尺寸
background-size:x y //具体数值宽高大小
background-size:100% 100% //具体百分比大小，不溢出可能会变形
background-size:cover 比例放大 //如果图片比例方大到一些内容盒子放不下，会溢出然后看不见
background-size:contain 包含（图片不溢出）//意思就是图片不会变形，如：图片没有盒子大小可能会留出空白
在这里插入图片描述
二、多背景：意思就是下面的属性可以用逗号，隔开加多个背景
1、background:url() 0 0,url() 0 100%; //值说明，第一个是地址第二个是，是否平铺，第三、四个是图片位置，0 0 代表左上角右下角代表 100% 100%
如：
background:url("images/1.jpg") no-repeat 0 0,url("images/2.jpg") no-repeat 100% 0,url("images/3.jpg") no-repeat 0 100%,url("images/4.jpg") no-repeat 100% 100%,}
三、background-origin：背景区域定位，（其实是设置哪里是边框）
1、padding-box 从padding区域开始显示背景。
如图：把边框设置透明会发现边框内把溢出的片段实现了平铺，而padding内的内容是完整的图片在这里插入图片描述
2、 content-box：从content内容区域开始显示背景。
如图：content 外的片段进行了平铺

3、 border-box 从border区域开始显示背景。
如图：

四、background-clip：背景绘制区域（设定背景范围）
1、border-box 默认值，从border区域向外裁剪背景，边框里面是背景（包含边框）。
如图：
在这里插入图片描述
2、 padding-box 从padding区域向外裁剪背景，padding里面是背景（包含padding）。
如图:

3、content-box 从content区域向外裁剪背景，内容里面是背景(包含内容)。
如图：
4、text 背景填充文本，就是使文本成为背景
作用:

div{width:300px;height:300px;border:20px solid rgba(0,0,0,.8);
background:red url("images/1.jpg");
background-size:100% 100%;
}
.div1{-webkit-background-clip:text;          //文本填充背景
color:rgba(0,0,0,0);      // 黑色透明
font:50px/300px "微软雅黑";text-align:center;font-weight:800;
 }
<div class="div1">
	学习
</div>

在这里插入图片描述
5、no-clip 从border区域向外裁剪背景。
四、颜色渐变
线性渐变：linear-gradient(起点/角度，颜色位置，…,) 用角度设置方向的时候，是值为left 开始逆时针旋转，如30deg 则从值为left的界面旋转30度
起点：left/top/right/bottom/left top… 默认top
角度：逆时针方向 0-360度
颜色位置：red 50%, blue 100%(一开始红色然后到50%开始渐变，到100%为蓝色)
如：

   div{
			width:300px;height:300px;background-image:-webkit-linear-gradient(left top,red,blue);      //这个属性默认的方向是  left  这里设置了红蓝如图
	}
	<body><!--身体-->
	<div ></div>

如图：在这里插入图片描述又如：如图，0%开始红色渐变到50%为蓝色，蓝色渐变到100%为黄色

div{
			width:300px;height:300px;
			background-image:-webkit-linear-gradient(0deg,red 0%,blue 50%,yellow 100%);/*逆时针旋转*/
		}

在这里插入图片描述
2、repeating-linear-gradient 线性渐变重复平铺，重复平铺

     div{
	width:300px;height:20px;
	border:1px solid rgba(255,0,0,1);
	background-image:-webkit-repeating-linear-gradient(30deg,#cc00ff 0,#663333 10px,#993300 10px,#6600cc 20px); 
	// 这里到20px结束，然后因为是repeating-linear-gradient 重复平铺，会重新实现一样的颜色渐变
	border-radius:20px;transition:1s linear;
    }

如图：在这里插入图片描述

IE低版本渐变(滤镜)：
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ffffff’,endColorstr=’#ff0000’,GradientType=‘1’);
五、径向渐变
radial-gradient(起点(圆心位置), 形状/半径/大小，颜色1，颜色2)
起点：left/top/right/bottom或具体值/百分比
形状：ellipse(椭圆)、circle(正圆)
大小：具体数值或百分比，也可以是关键字（closest-side(最近端), closest-corner(最近角), farthest-side(最远端), farthest-corner(最远角), contain(包含) ,cover(覆盖)）;
注:firefox目前只支持关键字

div{
	width:300px;height:300px;
	border:1px solid rgba(255,0,0,1);
	background-image:-webkit-radial-gradient(rgba(0,0,0,1),rgba(0,255,0,1));   //颜色从黑色向绿径向渐变
}

如图：
在这里插入图片描述
又如：

div{
			width:300px;height:300px;
			border:1px solid rgba(255,0,0,1);
			background-image:-webkit-radial-gradient(200px 100px,100px 50px ,rgba(0,0,0,1),rgba(0,255,0,1)); 
			                                                                  //位置               横半径  竖半径   颜色
		}