CSS背景演示

马黑黑

加林森 发表于 2022-1-6 12:03
得看是什么人说的。

马黑黑

 

		背景图片纵向重复：

		margin: 4px auto;
		border: 1px solid olive;
		width: 600px;
		height: 400px;
		background-image: url('图片地址');
		background-repeat: repeat-y;

加林森

马黑黑 发表于 2022-1-6 12:21

开森

马黑黑

  
  背景图片定位：

	margin: 3px auto;
	width: 600px;
	height: 400px;
	border: 1px solid #444;
	background-image: url('图片地址');
	background-position: right bottom;
	background-repeat: no-repeat;

  /*  背景图片不重复时定位才有效果！
	right，left，top，bottom 单独使用时，
        另一个值默认为 center；center 单独
	使用时居中。还可以用像素值、百分比
  */

马黑黑

  
  背景图片大小设置：

	margin: 0 auto;
	width: 600px;
	height: 400px;
	border: 1px solid #aaa;
	background-image: url('图片地址');
	background-repeat: no-repeat;
	background-position: top right;
	background-size: 200px 200px;

实图：
 

红影

看到你的命令里好像都是先加个color: white;然后才加背景色，这个color: white;是必须的么？

红影

惊叹于黑黑对这些功能应用得得心应手

马黑黑

红影 发表于 2022-1-6 13:18
看到你的命令里好像都是先加个color: white;然后才加背景色，这个color: white;是必须的么？

color 是前景色，与背景图片配套的文本颜色，使得文字、底色的对比度提升，便于阅读。

背景色、背景图片的核心代码基本都只是 background 前缀的属性命令

马黑黑

红影 发表于 2022-1-6 13:19
惊叹于黑黑对这些功能应用得得心应手

我杀猪更顺手

马黑黑

   

背景裁剪 content - 剪切成内容框

	margin: 0 auto;
        color: white;
	width: 600px;
	height: 400px;
	padding: 10px;
	border: 8px dotted olive;
	background-image: url('图片地址');
	background-clip: content-box;

马黑黑

    
背景剪切成内边距框（padding）：

	margin: 0 auto;
	width: 600px;
	height: 400px;
	color: #fff;
	border: 8px dotted #cc6699;
	background-image: url('图片地址');
	background-clip: padding-box;

马黑黑

    

    背景剪切成边框方框（border-box）：

	margin: 0 auto;
	width: 600px;
	height: 400px;
	color: #fff;
	border: 8px dotted #cc6699;
	background-image: url('图片地址');
	background-clip: border-box;

马黑黑

  

  双图背景：
	margin: 2px auto;
	width: 600px;
	height: 400px;
	color: #fff;
	background-image: url('图1'), url('图2');
	background-position: 95% 5%, top right;
	background-repeat: no-repeat,repeat;
	background-size: 150px 150px, 40px 40px;

/*  多图做背景时，重复平铺的图放在最后，否则前面
     的图会被覆盖！重复的图位置随意设置。
*/

马黑黑

   
多图背景：

	margin: 0 auto;
	width: 600px;
	height: 400px;
	background: url('图1') no-repeat 10% 90%, url('图2') no-repeat 95% 5%, 
 url('图3') repeat left top; 
	background-size: 30px 30px, 200px 200px, 120px 120px;
	color: white;

红影

马黑黑 发表于 2022-1-6 14:24
color 是前景色，与背景图片配套的文本颜色，使得文字、底色的对比度提升，便于阅读。

背景色、背景图 ...

嗯，看到一只有这个，没明白，现在知道了

马黑黑

红影 发表于 2022-1-6 16:24
嗯，看到一只有这个，没明白，现在知道了

嗯嗯，前景色和背景色有一定的对比度是友好的

红影

马黑黑 发表于 2022-1-6 14:59
.clipborder {
        margin: 0 auto;
        width: 600px;

这三楼放一起，倒是对着几个命令的理解更深入了。前面觉得都是边界的含义，还有点迷糊

马黑黑

红影 发表于 2022-1-6 16:31
这三楼放一起，倒是对着几个命令的理解更深入了。前面觉得都是边界的含义，还有点迷糊

还需要自己动手，修改一些设定查看效果，这样就更清楚

马黑黑

12种颜色

加林森

    

    背景剪切成边框方框（border-box）：

	margin: 0 auto;
	width: 600px;
	height: 400px;
	color: #fff;
	border: 8px dotted #cc6699;
	background-image: url('https://f.sinaimg.cn/tech/transform/412/w199h213/20210309/0a02-kmeeius1088795.gif');
	background-clip: border-box;