首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSS background属性

属性解释 background属性css应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图片和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: background-color...设置背景图片是固定还是随着页面滚动条滚动 实际应用,我们可以用background属性将上面所有的设置项放在一起,而且也建议这么做,这样做性能更高,而且兼容性更好,比如:“background:...简写 background 属性示例 “background:cyan url(bg.jpg) repeat-x”,横向平铺盒子,盒子其他部分显示背景颜色“cyan”。 ? 简写如下: ?...---- “background: cyan url(bg.png) no-repeat left center;”,背景不重复,背景和盒子左对齐,盒子其他部分显示背景颜色“cyan”。 ?...---- “background: cyan url(bg.png) no-repeat right center;”,背景不重复,背景和盒子右对齐,也就是背景图片的右边对齐盒子的右边,盒子其他部分显示背景颜色

1.3K10

CSS background属性使用指南

如果是多行属性的操作,我们可能是这样写: background: transparent url(./5.jpg) no-repeat bottom left; background-size:150px...auto; 而在单行属性声明,我们仅需这样写: background: transparent url(./5.jpg) no-repeat bottom left/150px; 也可以达到一样的效果...background-clip:背景图是否延伸到边框下面 在单行 background属性声明,由于两者属性值相同,在仅出现了一个属性值的时候,他同时为 background-origin和 background-clip...,否则会导致整个 background属性声明失效; 在多张背景图存在重叠的情况下,先声明的背景图优先级高 CSS如下: background: url('./5.jpg') center/100px...的单行属性声明使用就讲到这里,后续会继续补充,写的不好的麻烦见谅...新手作者 Object-fit实现img图片尺寸设置 本文主要针对的是background属性的图片常规操作,讲到图片,这边也浅谈一下

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

CSS 背景(background)

背景固定还是滚动 背景的合写(复合属性background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 背景图片(image) 语法: background-image : none...| url (url) 参数: none :  无背景图(默认的) url :  使用绝对或相对地址指定背景图像 background-image 属性允许指定一个图片展示在背景(只有CSS3...背景简写 background属性的值的书写顺序官方并没有强制标准的。...     背景透明(CSS3) CSS3支持背景半透明的写法语法格式是: background: rgba(0,0,0,0.3); 最后一个参数是alpha 透明度 取值范围 0~1...背景缩放(CSS3) 通过background-size设置背景图片的尺寸,就像我们设置img的尺寸一样,在移动Web开发做屏幕适配应用非常广泛。

2.1K20

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.8K20

CSSbackground属性与margin和padding内外边距的关系总结

最近在写一个系统页面,涉及到background背景和背景图、渐变等属性,经过查阅资料发现background有各种子属性,特此整理一下。 浏览器兼容性支持:     PC端: ?    ...background常用属性background-image:定义背景图像。需要用 url('...') 引入图片。...background-repeat: no-repeat; 图像不重复,如果图像较大会被裁剪,如果图像比背景元素小,背景图像的位置由 background-position 属性来决定。...background-repeat: inherit; 从父元素继承 background-repeat 属性的设置。...CSS3新增: background-origin:指定背景的显示区域。默认情况下,总是以元素左上角为坐标原点进行背景图像定位。

6.4K00

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

一、渐变 渐变是CSS3当中比较丰富多彩的一个特性,通过渐变我们可以实现许多炫丽的效果,有效的减少图片的使用数量,并且具有很强的适应性和可扩展性。可分为线性渐变、径向渐变。...二、background 属性 1、复习background属性 /*添加背景颜色*/ background-color: #fff; /*添加背景图片*/ background-image: url...2、新增的background属性 2.1、background-size CSS里的 background-size 属性能够让程序员决定如何在指定的元素里展示,它通过各种不同是属性值改变背景尺寸呈现的大小...我们在 background-position 定位的时候,都是默认定位原点在元素的左上角来定位的。可不可以调节定位的位置呢? background-origin:可以调节定位原点的位置。...看下面的 background-clip. 2.3、background-clip background-clip:属性规定背景的绘制区域. 虽然是设置裁切,但是控制的是显示。

1.8K10

CSS征途之Background点滴

相对于传统HTML的表现而言,CSS能够对网页的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,且能够根据不同使用者的理解能力...5、新属性Background Break css3里标签元素能被分在不同区域(如:让内联元素span跨多行),background-break属性能够控制背景在不同区域显示。...7、背景重复的调整 css2里当设置背景的时候,它经常被标签元素截取而显示不全,css3介绍了2个新属性来修复此问题。...比如一个容器(body,div,span)设定一个背景。这个背景的长宽值在css2.1之前是不能被修改的。...但是css3出现以后,这个情况被改善了。background-size 属性可以让我们之前的希望成真。 而且这个属性在firefox,chrome,以及ie9上都可以使用。

1.5K40

深入常用CSS声明(一) —— Background

一直对一些自己常用的css声明掌握得不是很全,只知道常用的一些属性和值,但是对于其他的用法确实一知半解,这篇文章旨在扫盲,先不说有多深的理解,至少做到能够看到这些声明的属性和值的时候做到不陌生。...这里后续还会增加更多自己在工作和学习的一些css声明,供自己查阅,也提供给大家看看。...因为最底层的容器背景图片设置为inherit,当时上层容器un-image-wrapper并没有设置任何背景图片,因此继承属性默认为none。...例如CSDN如此应用: .sprite-imgs .link_comments { background-image: url('.....如果有,那么一定是既有自身尺寸,又有自身比例 css渐变图:没有自身尺寸和比例 element: 拥有element元素的尺寸和比例 针对以上图片属性,我们平时针对最多的就是位图,因此只需要记住位图对应的规则就可以了

1.7K50
领券