css --- background 四（多重背景、混合写法）

最新推荐文章于 2024-10-25 00:09:31 发布

某些开发

最新推荐文章于 2024-10-25 00:09:31 发布

阅读量3.8k

点赞数 2

分类专栏：网页与布局

本文链接：https://blog.youkuaiyun.com/weixin_43964866/article/details/115416112

版权

网页与布局专栏收录该内容

11 篇文章

订阅专栏

这篇博客介绍了CSS中如何设置多重背景图，包括使用逗号分隔图片、调整`background-repeat`和`background-size`属性。同时讲解了背景属性的简写和斜杠语法，以及一个图片与线性渐变结合的背景应用实例。学习这些技巧能帮助开发者更好地控制网页元素的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

碎碎念：知识点梳理归纳，如果有什么不对的感谢大家指正一起学习！

1. 多重背景图，用逗号区别各个图片
- 1.1 多重背景，设置不同的参数
- - 1.1.1 background-repeat
  - 1.1.2 background-size
2. 混合写法
- 2.1 简写
- 2.1 斜杠语法
3. 范例
- 3.1 图片、线性渐变重叠的背景

1. 多重背景图，用逗号区别各个图片

 background: url(https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3041487934,2735112150&fm=26&gp=0.jpg),  
             url(https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=383729164,3114814932&fm=26&gp=0.jpg);
             
/* 设置图片位置信息不然会重叠在一起 */
background-size: contain,100px 100px;
background-repeat: no-repeat; 
background-position: 0 0,100px 200px;

在这里插入图片描述

1.1 多重背景，设置不同的参数

1.1.1 background-repeat

/*  第一张图片不重复，第二张图片x轴重复 */

background-repeat: no-repeat,repeat-x;

在这里插入图片描述

1.1.2 background-size

/*  第一张图片大小，第二张图片大小 */
background-size: 100% 50% , 50px 50px;

在这里插入图片描述

2. 混合写法

background是复合属性值组合，属性后面可以使用多个值，值与值之间用空格间隔

背景语法：

background: background-color || background-image || background-repeat || background-attachment || background-position / background-size|| background-origin background-clip;

2.1 简写

.box{
	width: 200px;
	height: 200px;
	background:greenyellow url(香瓜.jpg) no-repeat scroll center center;
	background-size: 100px 100px;
    }

在这里插入图片描述

2.1 斜杠语法

emm…暂时有点稀里糊涂

将background-size、origin、clip的值也简写进去，中间用 / 隔开

.box{
     width: 200px;
     height: 200px;
     padding: 10px;
     background:greenyellow url(香瓜.jpg) no-repeat scroll center center / 			  100px 100px content-box content-box;;
    }

在这里插入图片描述

3. 范例

3.1 图片、线性渐变重叠的背景

.img {
       width: 200px;
        height: 200px;
        background: url(香瓜.jpg),
        linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
        background-repeat: no-repeat, no-repeat;
        background-size: 100px 100px, 100% 100%;
        background-position: left, right bottom;
      }

在这里插入图片描述