首页
学习
活动
专区
工具
TVP
发布

CSS background属性

属性解释 background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图片和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: background-color...设置背景颜色 background-image 设置背景图片地址 background-repeat 设置背景图片如何重复平铺 background-position 设置背景图片的位置 background-attachment...设置背景图片是固定还是随着页面滚动条滚动 实际应用中,我们可以用background属性将上面所有的设置项放在一起,而且也建议这么做,这样做性能更高,而且兼容性更好,比如:“background:...写完上来几个属性,如果每个都要单独写的话就比较费劲,下面介绍一下如何生成一行。...简写 background 属性示例 “background:cyan url(bg.jpg) repeat-x”,横向平铺盒子,盒子其他部分显示背景颜色“cyan”。 ? 简写如下: ?

1.2K10
您找到你想要的搜索结果了吗?
是的
没有找到

CSS background属性使用指南

关于background的相关属性 所有的浏览器都支持background属性 拿起了我多年前用过的xmind导出了张属性说明图 下面的演示案例将直接使用 background这个属性,不适用单属性设置...如果是多行属性的操作中,我们可能是这样写: background: transparent url(./5.jpg) no-repeat bottom left; background-size:150px...background-clip:背景图是否延伸到边框下面 在单行 background属性声明中,由于两者属性值相同,在仅出现了一个属性值的时候,他同时为 background-origin和 background-clip...设定属性,如果出现了两次,则分别给 background-origin、 background-clip设定....,起始点和终止点的对角线连线即为背景图可绘制的最大区域 当使用 background-attachment 为 fixed时, background-origin属性将被忽略不起作用。

84430

CSS3背景图片background属性简写连写

在开发中背景属性 background 还是很常用的, background 有很多属性,如 background-color 背景颜色、 background-image 背景图像、 background-position... 背景图像的位置、 background-size 背景图片的尺寸、 background-repeat 重复背景图像、 background-origin 定位区域、 background-clip ...当然这些属性可以分开写,也可以连写(简写),规则(顺序)如下: background:color img_url repeat attachment position / size 颜色 图片地址 重复...图像位置和尺寸用 / 隔开,前面是 background-position ,后面是 background-size 。...声明:本文由w3h5原创,转载请注明出处:《CSS3背景图片background属性简写/连写》 https://www.w3h5.com/post/370.html

4.6K20

从零开始学 Web 之 CSS3(三)渐变,background属性

二、background 属性 1、复习background属性 /*添加背景颜色*/ background-color: #fff; /*添加背景图片*/ background-image: url...2、新增的background属性 2.1、background-size CSS里的 background-size 属性能够让程序员决定如何在指定的元素里展示,它通过各种不同是属性值改变背景尺寸呈现的大小.../*设置背景图片的大小:宽度/高度 宽度/auto(保持比例自动缩放)*/ background-size: 100px 50px; background-size: 100px; /*设置百分比...我们在 background-position 定位的时候,都是默认定位原点在元素的左上角来定位的。可不可以调节定位的位置呢? background-origin:可以调节定位原点的位置。...看下面的 background-clip. 2.3、background-clip background-clip:属性规定背景的绘制区域. 虽然是设置裁切,但是控制的是显示。

1.8K10

CSS中的background属性与margin和padding内外边距的关系总结

最近在写一个系统页面,涉及到background背景和背景图、渐变等属性,经过查阅资料发现background有各种子属性,特此整理一下。 浏览器兼容性支持:     PC端: ?    ...background常用属性background-image:定义背景图像。需要用 url('...') 引入图片。...第一个和最后一个图像会被固定在元素(element)的相应的边上, 同时空白会均匀地分布在图像之间,background-position属性会被忽视, 除非只有一个图像能被无裁剪地显示,只在一种情况下裁剪会发生...background-repeat: no-repeat; 图像不重复,如果图像较大会被裁剪,如果图像比背景元素小,背景图像的位置由 background-position 属性来决定。...background-repeat: inherit; 从父元素继承 background-repeat 属性的设置。

5.9K00

CSS 背景(background)

背景固定还是滚动 背景的合写(复合属性background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 背景图片(image) 语法: background-image : none...| url (url) 参数: none :  无背景图(默认的) url :  使用绝对或相对地址指定背景图像 background-image 属性允许指定一个图片展示在背景中(只有CSS3...必须先指定background-image属性。默认值为:(0% 0%)。 如果只指定了一个值,该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。...背景简写 background属性的值的书写顺序官方并没有强制标准的。...每组属性间使用逗号分隔。 如果设置的多重背景图之间存在着交集(即存在着重叠关系),前面的背景图会覆盖在后面的背景图之上。

2K20
领券