ITPub博客

首页 > IT职业 > IT生活 > CSS3背景属性的概念整理

CSS3背景属性的概念整理

IT生活 作者:blankrabbit 时间:2021-09-11 09:46:51 0 删除 编辑

本文介绍关于背景(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背景属性的概念整理,希望对大家有所帮助。更多css学习指路:css教程

本文转载于php中文网,如有侵犯联系作者修改。

来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/212/viewspace-2828247/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2020-07-23

  • 博文量
    0
  • 访问量
    654