CSS背景演示

马黑黑 · 发表于 2022-1-6 10:00

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-1-6 16:23 编辑

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

登录/注册后可看大图

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

登录/注册后可看大图

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

登录/注册后可看大图

马黑黑 · 发表于 2022-1-6 10:09

  

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

加林森 · 发表于 2022-1-6 10:24

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

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

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

谢茶

加林森 · 发表于 2022-1-6 10:29

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

谢谢你的教程了啊。

马黑黑 · 发表于 2022-1-6 10:36

  

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

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

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

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

加林森 · 发表于 2022-1-6 10:42

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

谢茶

马黑黑 · 发表于 2022-1-6 11:07

  
  
  纯色 + rgba透明

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

加林森 · 发表于 2022-1-6 11:14

继续研究

马黑黑 · 发表于 2022-1-6 11:19

  

  默认值背景图：

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

马黑黑 · 发表于 2022-1-6 11:21

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

应该不难的吧

加林森 · 发表于 2022-1-6 11:24

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

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

马黑黑 · 发表于 2022-1-6 11:34

  

  默认背景图 + opacity透明

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

马黑黑 · 发表于 2022-1-6 11:37

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

嗯嗯，俺都是说人话的

加林森 · 发表于 2022-1-6 11:48

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

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

马黑黑 · 发表于 2022-1-6 11:54








  背景图片不重复

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

马黑黑 · 发表于 2022-1-6 11:56

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

黑人说白话你听懂不

加林森 · 发表于 2022-1-6 12:03

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

得看是什么人说的。

马黑黑 · 发表于 2022-1-6 12:19

  






  背景图片横向重复：

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

CSS背景演示

请马上登录，朋友们都在花潮里等着你哦：）

评分

浏览过的版块

花潮帅哥

鼠

牛

虎

兔

龙

蛇

马

羊

猴

鸡

狗

猪

多彩人生

星月交辉

奔放热烈

海样胸怀

春风拂面

火热情怀

优雅迷人

神秘浪漫

相遇之美

鹰傲苍穹

花好月圆

紫色情节

飞龙在天

王者至尊

大将风范

音画大师

天籁妙音

共看流星

风雨同行

我心永远

幸福快乐

喜乐安康

侠骨柔肠

心想事成

开朗大方

花潮管理

缤纷心情

草莓情怀

青草情怀

蝴蝶情怀

心曲飞扬

星星情怀

七彩绚丽

活泼开朗

女儿情怀

男儿情怀

指尖上的流年

花潮版主