CSS 背景

lastSeries 发布于2019-08-28 18:18 / 1418人阅读

摘要：概览背景属性用于定义元素的背景。如果边框有透明部分如虚线边框，会透过这些透明部分显示出背景色。从父元素继承背景颜色，这个在上存在兼容问题。背景图像会随着页面其余部分的滚动而移动。简写属性属性在一个声明中设置所有背景属性。

概览

CSS 背景属性用于定义HTML元素的背景。

相关的属性

background-color: 设置背景颜色

background-image: 设置背景图片

background-repeat: 设置背景图片是否重复及如何重复

background-position: 设置背景图像的位置

background-attachment: 背景图像是否固定或者随着页面的其余部分滚动

background: 简写属性，作用是将背景属性设置在一个声明中

元素背景的范围

背景会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色。

浏览器支持

所有主要浏览器都支持背景属性。

注意： IE7和更早的版本不支持"继承"的值（inherit）。 IE8需要定义!DOCTYPE。 IE9支持"继承"。

背景颜色

background-color 属性用来定义元素的背景颜色。

body {background-color: #b0c4de;}

CSS中，颜色值通常以以下方式定义:

十六进制 - 如：#ff0000

RGB - 如：rgb(255,0,0)

颜色名称 - 如：red

默认 - transparent,透明之意。如果一个元素没有指定背景色，那么背景就是透明的。

inherit 从父元素继承背景颜色，这个在IE上存在兼容问题。

背景图像

background-image 属性用来定义元素的背景图像。

默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。

body {background-image: url("paper.gif");}

提示：背景颜色和背景图像是可以共存的，请设置一种可用的背景颜色，这样的话，假如背景图像不可用，页面也可获得良好的视觉效果。

body {background-image: url("paper.gif");background-color:#fff;}

属性值：

none - 默认无背景图像

url("image path") - 图像的可访问路径，可以使用网络地址，相对路径地址，绝对路径地址

inherit - 从父元素继承

背景重复

如果需要对背景图像平铺，可以使用background-repeat属性。

body {
    background-image: url("gradient2.png");
    background-repeat: repeat-x;
}

属性值：

repeat 导致图像在水平垂直方向上都平铺，默认。

repeat-x 和 repeat-y 分别使背景图像只在水平或垂直方向上重复。

no-repeat 则不允许图像在任何方向上平铺。

inherit 从父元素继承。

背景定位

background-position 属性用来控制背景图片的位置，一般配合 background-repeat: no-repeat; 使用。

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
}

为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px，最后也可以使用百分数值。

关键词

图像放置关键字最容易理解，其作用如其名称所表明的。例如，top right 使图像放置在元素内边距区的右上角。

根据规范，位置关键字可以按任何顺序出现，只要保证不超过两个关键字，一个对应水平方向，另一个对应垂直方向，top right 和 right top 是等效的。

如果只出现一个关键字，则认为另一个关键字是 center。

百分比

百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中：

body { 
    background-image: url("/eg_bg_03.gif");
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

如果图像位于 0% 0%，其左上角将放在元素内边距区的左上角。如果图像位置是 100% 100%，会使图像的右下角放在右边距的右下角。

把一个图像放在水平方向 2/3、垂直方向 1/3 处：

body { 
    background-image: url("/eg_bg_03.gif");
    background-repeat: no-repeat;
    background-position: 66% 33%;
}

如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为 50%。

长度值

长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。

比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上。

背景固定

background-attachment 属性设置背景图像是否固定或随页面的其余部分滚动。

body {
    background-image:url("image.png");
    background-repeat:no-repeat;
    background-attachment:fixed;
}

属性值：

scroll 默认。背景图像会随着页面其余部分的滚动而移动。

fixed 当页面的其余部分滚动时，背景图像不会移动。

inherit 从父元素继承。

简写属性

background 属性在一个声明中设置所有背景属性。

body { 
    background: #00FF00 url("bgimage.gif") no-repeat fixed top;
}

如果不设置其中的某个值，也不会出问题，比如 background:#ff0000 url("smiley.gif"); 也是允许的。

通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。

GPU服务器私有云背景图片html5设置背景去背景行背景设置背景

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111158.html

css基础系列

摘要：盒子模型和标准盒子模型行内块元素，元素呈现为具有相依特性元素不会被显示。文字基线属性设置元素中文本行高语法长度值百分比浏览器有默认的行高，不同浏览器默认行高不一样。盒子模型盒子模型的概念高和宽的设置边框的设置内边距的设置外边距的设置盒子的计算元素显示的方式盒子模型： border边框，margin外边距，padding内部距，content内容，width宽度。 ...

shiina 2019-04-23 11:40 评论0 收藏0
css基础系列

摘要：盒子模型边框，外边距，内部距，内容，宽度。盒子模型和标准盒子模型行内块元素，元素呈现为具有相依特性元素不会被显示。文字基线属性设置元素中文本行高语法长度值百分比浏览器有默认的行高，不同浏览器默认行高不一样。盒子模型： border边框，margin外边距，padding内部距，content内容，width宽度。高度： height: 长度值|百分比|auto 最大高度: m...

SexySix 2019-04-22 16:12 评论0 收藏0
CSS<背景>

摘要：背景概览有几个很棒的背景属性，它们提供了对背景更强大的控制。规定背景的绘制区域。数值定义设置背景图像的高度和宽度。 1.css3简介 CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。 2.css3背景概览有几个很棒的背景属性，...

smartlion 2019-08-30 15:54 评论0 收藏0
CSS<背景>

摘要：背景概览有几个很棒的背景属性，它们提供了对背景更强大的控制。规定背景的绘制区域。数值定义设置背景图像的高度和宽度。1.css3简介 CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。 2.css3背景概览有几个很棒的背景属性，它们提...

番茄西红柿 2019-04-23 13:32 评论0 收藏0