CSS新手入门笔记整理:CSS3背景样式

背景大小:background-size

语法

div{background-size:取值;}
div{background-size:100px 100px;}

background-size属性取值有两种:一种是长度值,如px、em、百分比等;另一种是使用关键字。

属性值

说明

cover

即“覆盖”,表示将背景图片等比缩放来填满整个元素

contain

即“容纳”,表示将背景图片等比缩放至某一边紧贴元素边沿为止


背景位置:background-origin

语法

div{background-origin:取值;}

属性值

说明

border-box

从边框开始平铺

padding-box

从内边距开始平铺(默认值)

content-box

从内容区开始平铺


背景剪切:background-clip

background-clip属性用于指定背景图片在元素盒子模型中的哪些区域被剪切。

语法

div{background-clip:取值;}

属性值

说明

border-box

从边框开始剪切(默认值)

padding-box

从内边距开始剪切

content-box

从内容区开始剪切


多背景图片

语法

div{background:
  url(img/frame1.png) bottom left no-repeat,
  url(img/frame2.png) top right no-repeat;}

background是一个复合属性,上面代码其实等价于:

div{
	background:url(img/frame1.png), url(img/frame2.png);
	background-position: bottom left, top right;
	background-repeat:no-repeat, no-repeat;
}

相关推荐

  1. CSS新手入门笔记整理CSS3文本样式

    2023-12-22 06:28:08       51 阅读
  2. CSS新手入门笔记整理CSS3颜色样式

    2023-12-22 06:28:08       53 阅读
  3. CSS新手入门笔记整理CSS列表样式

    2023-12-22 06:28:08       56 阅读
  4. CSS新手入门笔记整理CSS3选择器

    2023-12-22 06:28:08       49 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2023-12-22 06:28:08       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2023-12-22 06:28:08       106 阅读
  3. 在Django里面运行非项目文件

    2023-12-22 06:28:08       87 阅读
  4. Python语言-面向对象

    2023-12-22 06:28:08       96 阅读

热门阅读

  1. Python PDF格式转PPT格式

    2023-12-22 06:28:08       62 阅读
  2. Spring Boot Web中文文档

    2023-12-22 06:28:08       54 阅读
  3. 【SpringBoot实战】基于阿里云实现文件上传

    2023-12-22 06:28:08       67 阅读
  4. vue获取图片的blob传给django后端

    2023-12-22 06:28:08       63 阅读
  5. OpenVAS 网络配置

    2023-12-22 06:28:08       63 阅读
  6. Linux安装Tengine服务器 linux安装tengine服务器

    2023-12-22 06:28:08       62 阅读
  7. Linux(CentOS)安装Redis教程

    2023-12-22 06:28:08       55 阅读
  8. centos 8 部署nextCloud

    2023-12-22 06:28:08       72 阅读