• 微信号
目录

html笔记

您当前的位置:首页 > 我的笔记 > html笔记>css3背景

上一篇: css3边框

下一篇: css3颜色

css3背景

CSS3允许使用多个属性(比如background-image、background-repeat、background-size、background-position、background-origin和background-clip等)在一个元素上添加多层背景图片。该属性的应用大大改善了以往面对多层次设计需要多层布局的问题,帮助Web前端开发者在不借助Photoshop的情况下实现对页面背景的设计,简化了背景图片的维护成本。

background-size

background-size:属性规定背景图像的尺寸

语法: background-size: length|percentage|cover|contain

属性值

  • `length`:设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"
  • `percentage`:以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"
  • `cover`:把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中
  • `contain`:把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域
div {
    background:url('../images/bg.png');
    background-size: 100% 100%;
}

background-image

background-image:属性设置一个元素的背景图像

语法: background-image: url('图片地址1'),url('图片地址2');

属性值

  • url {string} :图像的URL
  • none :无图像背景会显示。默认值
  • inherit :指定背景图像应该从父元素继承
div {
    background-image: url('../images/bg.png');
}

background-origin

background-origin:属性指定了背景图像的位置区域

语法: background-origin: padding-box|border-box|content-box

属性值

  • padding-box : 背景图像相对于内边距框来定位
  • border-box : 背景图像相对于边框盒来定位
  • content-box : 背景图像相对于内容框来定位
div {
    background-image:url('../images/bg.jpg');
    background-position:left;
    background-repeat:no-repeat;
    background-origin:content-box;
}

background-clip

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

语法:background-clip: border-box|padding-box|content-box;

属性值

  • border-box :背景被裁剪到边框
  • padding-box :背景被裁剪到内边距框
  • content-box :背景被裁剪到内容框
div {
    background-color:yellow;
    background-clip:content-box;
}

上一篇: css3边框

下一篇: css3颜色