域名名称,360手机优化大师安卓版,网站源码怎么用,网站改版的费用CSS的background属性是一个简写属性#xff0c;它允许你同时设置元素的多个背景相关的子属性。使用这个属性可以简化代码#xff0c;使其更加清晰和易于维护。background属性可以设置不同的子属性。
background子属性 定义背景颜色
使用background-color属性
格式#x…CSS的background属性是一个简写属性它允许你同时设置元素的多个背景相关的子属性。使用这个属性可以简化代码使其更加清晰和易于维护。background属性可以设置不同的子属性。
background子属性 定义背景颜色
使用background-color属性
格式background-color#ff0000; /* 蓝色 */
也可以直接用background属性
格式background#ff0000; /* 蓝色 */
两种方式写出来的效果是一样的。
属性值可以是颜色名、十六进制值、RGB、RGBA、HSL、HSLA或其他CSS颜色值。 定义背景图像
使用background-image属性
格式background-imageurl(background-image.jpg);
属性值可以是URL路径、线性渐变、径向渐变等。 定义背景图像的重复方式
使用background-repeat属性
格式background-repeatno-repeat; 属性值 repeat背景图像在垂直和水平方向上重复。 repeat-x背景图像只在水平方向上重复。 repeat-y背景图像只在垂直方向上重复。 no-repeat背景图像不重复。 定义背景图像的位置
使用background-position属性
格式background-positioncenter;
属性值可以是关键词如top、bottom、left、right、center或长度值或两者的组合常用的就是center。 定义背景图像的尺寸CSS3
使用background-size属性
格式background-sizecover; 属性值 长度值 或者 百分比 cover覆盖整个元素区域 contain完全包含在元素内 定义背景图像是否固定或者随着页面滚动CSS3
使用background-attachment属性
格式background-attachmentfixed; 属性值 scroll背景图像随着页面滚动。 fixed背景图像固定页面滚动时不动。 local背景图像随着元素的内容滚动。 定义背景的绘制区域CSS3
使用background-clip属性
background-clip控制的是背景的可见区域即背景绘制到哪里停止。
格式background-clipborder-box; 属性值 border-box背景延伸到边框内侧边缘。 padding-box背景延伸到内边距内侧边缘不包括边框。 content-box背景仅延伸到内容区域不包括内边距和边框。 text背景将剪切并贴合文本这是比较新的属性值可能不是所有浏览器都支持。 定义背景定位的起始位置CSS3
使用background-origin属性
background-origin控制的是背景的定位起点即从哪里开始定位背景。
格式background-origincontent-box; 属性值 border-box背景定位相对于边框盒。 padding-box背景定位相对于内边距盒这是默认值。 content-box背景定位相对于内容盒。 background属性
background 是一个复合属性它允许你一次性设置多个与背景相关的样式。 使用background简写属性可以一次性设置多个背景属性但如果需要设置的属性不全也可以只设置其中的一部分。如果某个子属性未被设置它将使用其默认值。
复合属性的优点 简化代码使用一个属性设置多个背景样式代码更简洁。 易于维护更新背景样式时只需要修改一个地方。 兼容性如果某个浏览器不支持某个子属性整个复合属性仍然可以正常工作。 注意事项 如果要设置的所有子属性都需要定义可以使用复合属性。 如果只需要设置部分子属性建议单独设置以避免不必要的复杂性。 使用 background 复合属性可以提高CSS的编写效率但需要确保按照正确的顺序设置各个子属性。 示例
代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylebody{ display: flex; flex-wrap: wrap; }div{width: 100px;height: 100px;text-align: center; /* 文本居中 */border: 1px solid #000; /* 边框线 为了标记每个div盒子 */}.p1{background-color: #0000ff; /* 背景色 */}.p2{background: #ff0000; /* 背景色 */}.p3{background-image: url(https://img2.baidu.com/it/u2086713274,1063413959fm253); /* 背景图 */background-position: center; /* 背景定位 中心 */background-repeat: no-repeat; /* 背景图是否重复平铺 不重复 */background-size: cover; /* 背景图尺寸 铺满 */}.p4{background: url(https://img2.baidu.com/it/u2086713274,1063413959fm253) no-repeat center;background-size: cover; /* background不支持cover属性 单独书写 */}/style
/head
bodydiv classp1文本1/divdiv classp2文本2/divdiv classp3文本3/divdiv classp4文本4/div
/body
/html
效果图
