十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
这篇文章主要介绍“CSS3背景属性的用法介绍”,在日常操作中,相信很多人在CSS3背景属性的用法介绍问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”CSS3背景属性的用法介绍”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
创新互联建站致力于互联网网站建设与网站营销,提供网站制作、成都网站设计、网站开发、seo优化、网站排名、互联网营销、微信小程序开发、公众号商城、等建站开发,创新互联建站网站建设策划专家,为不同类型的客户提供良好的互联网应用定制解决方案,帮助客户在新的全球化互联网环境中保持优势。
本文介绍关于背景(background)的新增属性和渐变函数(gradient),看看提供了哪些新背景元素控制和多种渐变效果的实现。
背景Background
1、background是多个背景属性的简写。
backgrounf: [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin], ...;
注意: 如果有 background-size 值,需要紧跟 background-position 并且用 "/" 隔开;
background-image
2、background-image属性可以添加多张背景图片。
不同的背景图像和图像用逗号隔开,所有的图片中显示在最顶端的为第一张。设置多张png图片,可以出多张背景图叠加的效果。
background-image: url("../../media/examples/lizard.png"), url("../../media/examples/star.png");
建议: 使用背景图片的时候,最好也设置背景颜色(background-color),作为背景图片不支持时的 planB。
background-size
CSS3 以前,背景图像大小由图像的实际大小决定。
3、background-size属性可以指定背景图像的大小,取值像素或百分比。
(相对于父元素的宽度和高度的百分比的大小)。
图片可以保有其原有的尺寸,或者拉伸到新的尺寸,或者在保持其原有比例的同时缩放到元素的可用空间的尺寸:
cover:保持图像的宽高比例,缩放背景图片以完全覆盖背景区,可能背景图片部分看不见。
contain:保持图像的宽高比例,缩放背景图片以完全装入背景区,可能背景区部分空白。
一个值:这个值指定图片的宽度,图片的高度隐式的为 auto
两个值:第一个值指定图片的宽度,第二个值指定图片的高度
background-origin
background-origin规定了指定背景图片属性的原点位置的背景相对区域。
注意: 当使用 background-attachment 为 fixed 时,该属性将被忽略不起作用。
到此,关于“CSS3背景属性的用法介绍”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!