CSS背景演示

马黑黑

本帖以回复的方式演示 CSS 背景效果：

                               
登录/注册后可看大图

                               
登录/注册后可看大图

☞ 一、纯色
☞ 二、纯色 + opacity透明
☞ 三、纯色 + rgba透明
☞ 四、默认背景图
☞ 五、默认背景图 + opacity透明
☞ 六、背景图片不重复
☞ 七、背景图片横向重复
☞ 八、背景图片纵向重复
☞ 九、背景图片定位
☞ 十、背景图片大小设置
☞ 十一、背景剪切成内容框
☞ 十二、背景剪切成内边距框
☞ 十三、背景剪切成边框方框
☞ 十四、双图背景
☞ 十五、多图背景

                               
登录/注册后可看大图

                               
登录/注册后可看大图

本帖所用的的图片（2P）：

                               
登录/注册后可看大图

马黑黑

  

  纯色背景
  
	margin: 6px auto;
	color: white;
	width: 600px;
	height: 400px;
	background-color: olive;

	

加林森

这个我得好好看看。谢谢老黑！

马黑黑

加林森 发表于 2022-1-6 10:24
这个我得好好看看。谢谢老黑！

谢茶

加林森

马黑黑 发表于 2022-1-6 10:25
谢茶

谢谢你的教程了啊。

马黑黑

  

  纯色 + opacity透明：（黑色背景）

	margin: 6px auto;
	color: #fff;
	width: 600px;
	height: 400px;
	background-color: #000;
	opacity: 0.6;

	

马黑黑

加林森 发表于 2022-1-6 10:29
谢谢你的教程了啊。

加林森

马黑黑 发表于 2022-1-6 10:38

谢茶

马黑黑

  
  
  纯色 + rgba透明

	margin: 6px auto;
	color: #fff;
	width: 600px;
	height: 400px;
	background-color: rgba(0,0,0,0.4);

	

加林森

继续研究

马黑黑

  

  默认值背景图：

	margin: 6px auto;
	width: 600px;
	height:400px;
	color: white;
	background: url('图片地址');
  /* 或者
	background-image: url('图片地址');
  */

马黑黑

加林森 发表于 2022-1-6 11:14
继续研究

应该不难的吧

加林森

马黑黑 发表于 2022-1-6 11:21
应该不难的吧

不难的，讲得很明白。谢谢老黑！

马黑黑

  

  默认背景图 + opacity透明

	margin: 6px auto;
	width: 600px;
	height: 400px;
	color: white;
	background-image: url('图片地址');
	opacity: .8;

马黑黑

加林森 发表于 2022-1-6 11:24
不难的，讲得很明白。谢谢老黑！

嗯嗯，俺都是说人话的

加林森

马黑黑 发表于 2022-1-6 11:37
嗯嗯，俺都是说人话的

万一你说黑话我就搞不懂了。

马黑黑

  背景图片不重复

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

马黑黑

加林森 发表于 2022-1-6 11:48
万一你说黑话我就搞不懂了。

黑人说白话你听懂不

加林森

马黑黑 发表于 2022-1-6 11:56
黑人说白话你听懂不

得看是什么人说的。

马黑黑

  






  背景图片横向重复：

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