印象中css控制背景的就一个background，但是background是一个复合属性
它包括：
background-color：背景颜色，css支持的颜色表示方法，都可以用
background-image：背景图片（url）
background-repeat：背景是否重复（repeat、no-repeat、repeat-x、repeat-y）
background-position：背景定位（关键字、百分比、像素）
background-size：背景大小
background-origin：背景的定位区域
background-clip：背景绘制区域
background-attachment：规定背景图像是否固定或者随着页面的其余部分滚动
除了这些，多背景、渐变、遮罩，我也把他们归到背景里吧。
一个个看看吧-0-。
开头说了，我很长时间都以为背景就是background这一个单词的玩意。因为我总是写成：
.p{
background: #000 url("1.jpg") no-repeat left center;/*颜色、图片、是否平铺、定位*/
}
不知道大家是不是也像我这样写啊。很简单吧，背景颜色、背景图片、是否重复、定位4个属性连着写。
下面说其他属性
背景的定位区域（background-origin）：值是关键字，有3个
.div{
width: 400px;
height: 200px;
padding: 20px;
border:10px solid rgba(255,255,255,.2);
background: #000 url("1.jpg") no-repeat;
background-origin:border-box;
/*background-origin:padding-box;*/
/*background-origin:content-box;*/
}
border-box
padding-box
content-box
以上就是background-origin的效果，但是貌似好像跟我想要的有那么点区别，底边跟右侧在padding、content的时候还是有背景图，而且啊好像对背景颜色（#000）没起作用
补充：它能决定背景定位的起点。
背景的定位区域（background-origin）：值是关键字，也有3个
.div{
width: 400px;
height: 200px;
padding: 20px;
border:10px solid rgba(0,0,0,.1);
background:#000 url("1.jpg") no-repeat;
/*background-clip:border-box;*/
/*background-clip:padding-box;*/
background-clip:content-box;
}
-
border-box：
-
padding-box：
-
content-box：
以上就是background-clip的效果，感觉比background-origin好那么点，哈。
多个背景图
以前在一个容器（p）里，实现多层背景，只能在容器里多写几个子元素，然后在把子元素定位。简单点让设计给出账图，直接糊上去完事（我经常干的事，哈哈）。
现在实现上边的效果，只要一个p就可以了。链接：demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div{
width: 240px;
height: 150px;
border:1px solid #000;
background: url("1.jpg") no-repeat left top,
url("2.jpg") no-repeat left bottom,
url("3.jpg") no-repeat right bottom;
background-size:100px auto, 100px auto, 100px auto;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
多个背景
渐变：作用在background-image上
线性渐变：
-webkit-linear-gradient(起点,color1,color2,...,colorN);
-webkit-linear-gradient(起点[方向],color1 定位,color2 定位,...,colorN 定位);
渐变参数-起点：关键字、百分比、像素、角度（逆时针旋转）
渐变重复：-webkit-repeating-linear-gradient(起点,color1 定位,color2 定位,...,colorN 定位);
径向渐变：参考
radial-gradient(position,shape,size,color);
position:定义径向渐变的圆心位置
shape:定义径向渐变的形状
size：确定径向渐变的结束形状大小
color：颜色
-
图中的at前的2个值是渐变大小（就是控制渐变形状的），at后的两个值是圆心
重复径向渐变：repeating-radial-gradient
遮罩：-webkit-mask
div{
/* 要配合背景使用 */
background:url("1.jpg") no-repeat 50% 50%/100% 100%;
-webkit-mask: url(1.png) 30px 10px/10px 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background: #000;
}
div{
width: 400px;
height: 300px;
border:12px solid #000;/* 没起作用 */
background:url("1.jpg") no-repeat 50% 50%/100% 100%;
-webkit-mask: url(1.png) 30px 10px/10px 10px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
图片大小：background-size
关键字：cover 等比缩放，保证填满容器，（配合背景定位，就实现图片居中了）
关键字：contain 等比缩放，容器可能会有缝隙
数值：x-控制图片宽， y-控制图片高
以上是css背景有关的属性详细介绍的详细内容。更多信息请关注PHP中文网其他相关文章！
什么是CSS Flexbox？Apr 30, 2025 pm 03:20 PM文章讨论了CSS FlexBox，这是一种布局方法，用于有效地对齐和分布响应设计中的空间。它说明了FlexBox用法，将其与CSS网格进行了比较，并详细浏览了浏览器支持。
我们如何使用CSS使网站迅速响应？Apr 30, 2025 pm 03:19 PM本文讨论了使用CSS创建响应网站的技术，包括视口元标签，灵活的网格，流体媒体，媒体查询和相对单元。它还涵盖了使用CSS网格和Flexbox一起使用，并推荐CSS框架
CSS盒装属性有什么作用？Apr 30, 2025 pm 03:18 PM本文讨论了CSS盒装属性，该属性控制了元素维度的计算方式。它解释了诸如Content-Box，Border-Box和Padding-Box之类的值，以及它们对布局设计和形式对齐的影响。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
EditPlus 中文破解版
体积小，语法高亮，不支持代码提示功能
PhpStorm Mac 版本
最新（2018.2.1 ）专业的PHP集成开发工具
SecLists
SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合，这些列表在安全评估过程中经常使用，都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表，帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上，他就可以访问到所需的每种类型的列表。
安全考试浏览器
Safe Exam Browser是一个安全的浏览器环境，用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问，并防止学生使用未经授权的资源。
禅工作室 13.0.1
功能强大的PHP集成开发环境
