CSS3背景

在CSS3之前我们对背景图片的控制极为有限,只能决定其来源、位置、重复,CSS3的到来对背景的使用开辟了一片新天地。

1、background-size

在 CSS3中,background-size 属性规定背景图像的尺寸。这就允许我们在不同的环境中重复使用背景图片,以像素或百分比规定尺寸。如果以百分比规定尺寸,那么尺寸相对于父元素的宽度和高度。

  1. length:设置背景图像的高度和宽度,第一个值设置宽度,第二个值设置高度,如果只设置一个值,则第二个值会被设置为auto。
  2. percentage: 以父元素的百分比来设置背景图像的宽度和高度,第一个值设置宽度,第二个值设置高度,如果只设置一个值,则第二个值会被设置为auto。
  3. cover: 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域,背景图像的某些部分也许无法显示在背景定位区域中。
  4. contain: 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

2、background-origin

background-origin 属性规定 background-position 属性相对于什么位置来定位

  1. padding-box: 背景图像相对于内边距框来定位
  2. border-box: 背景图像相对于边框盒来定位
  3. content-box: 背景图像相对于内容框来定位

如果背景图像的 background-attachment 属性为fixed,则该属性没有效果。

3、background-clip

background-clip 属性规定背景的绘制区域

  1. padding-box: 背景被裁剪到边框盒
  2. border-box: 背景被裁剪到内边距框
  3. content-box: 背景被裁剪到内容框

3、多背景

在之前的CSS中只能使用一张背景图片,CSS3可以使用多张背景图片

background:url("haoroomsCSS1_s.jpg") 0 0 no-repeat,
         url("haoroomsCSS2_s.jpg") 200px 0 no-repeat,
         url("haorooms.jpg") 400px 201px no-repeat;

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏菜鸟计划

CSS布局(五) 网页布局方式

网页实质是块与块之间的位置,块挨着块,块嵌套块,块叠着块。 三种关系:相邻,嵌套,重叠。 下面介绍网页布局的常用几种方式 ? 1.一列布局: 一般都是固定的宽高...

3416
来自专栏我的博客

JQuery事件处理

Jquery事件 1、  绑定事件示例代码: <a href=”#”>绑定事件</a> <div style=”display:none;”> 什么是绑定事件?...

2945
来自专栏十月梦想

文本阴影和边框阴影

    box-shadow:left top 模糊距离 阴影尺寸 阴影颜色 inset(内阴影);

782
来自专栏deepcc

一个特别不错的jQuery快捷键插件:js-hotkeys

3626
来自专栏前端知识分享

第48天:垂直滚动条

491
来自专栏技术总结

Hybird App之选择器详解(二)

2196
来自专栏一个小程序员的成长笔记

Canvas 图形组合方式

/** * 图形组合 */ function initDemo5() { var canvas = document.getElementById(...

3436
来自专栏Java后端技术

让div等块级元素水平以及垂直居中的解决办法

  我们在设计页面的时候,经常要把div等块级元素居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示。我们传统解决的办法是用纯CSS来让d...

722
来自专栏练小习的专栏

Dom 事件处理函数

别人整理的,我顺手就给捏来了哈哈。很详细的一些事件,浏览器支持情况,以及详细的说明。在这里向整理者致敬。 <!DOCTYPE html PUBLIC "-//W...

1738
来自专栏十月梦想

框模型

     元素框的实际宽度:width+左右外边距+左右border边框+左右内边距

913

扫码关注云+社区