CSS 属性定义背景效果:
- background-color
值 | 描述 |
---|---|
color | 指定背景颜色。在CSS颜色值近可能的寻找一个颜色值的完整列表。 |
transparent | 指定背景颜色应该是透明的。这是默认 |
inherit | 指定背景颜色,应该从父元素继承 |
你可以为所有元素设置背景色,包括 body 一直到 em 和 a 等行内元素。
background-color 不能继承,其默认值是 transparent。如果一个元素没有指定背景色,那么背景就是透明的,这样其父元素的背景才可见。
background-image
属性描述了元素的背景图像.默认情况下,背景图像进行平铺重复显示,以覆盖整个元素实体.
body {background-image:url('bgdesert.jpg');}
-
background-repeat
background-repeat:repeat-x;
background-repeat:no-repeat;
- background-attachment
scroll | 背景图片随页面的其余部分滚动。这是默认 |
fixed | 背景图像是固定的 |
inherit | 指定background-attachment的设置应该从父元素继承 |
local | 背景图片随滚动元素滚动 |
- background-position
单一关键字 | 等价的关键字 |
---|---|
center | center center |
top | top center 或 center top |
bottom | bottom center 或 center bottom |
right | right center 或 center right |
left | left center 或 center left |
百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中,你可以按照下面的代码进行设置:
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:50% 50%;
}
这会导致图像适当放置,其中心与其元素的中心对齐。
扫描二维码关注公众号,回复:
5579117 查看本文章
因此,如果你想把一个图像放在水平方向 2/3、垂直方向 1/3 处,可以这样声明:
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:66% 33%;
}
长度值
长度值解释的是元素内边距区左上角的偏移,偏移点是图像的左上角。
比如,如果设置值为 50px 100px,图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上:
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:50px 100px;
}
注意,这一点与百分数值不同,因为偏移只是从一个左上角到另一个左上角。也就是说,图像的左上角与 background-position 声明中的指定的点对齐。
背景- 简写属性
在以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。
为了简化这些属性的代码,我们可以将这些属性合并在同一个属性中.
背景颜色的简写属性为 "background":
实例
{background:#ffffff url('img_tree.png') no-repeat right top;}
-
background-blend-mode blend:混合
值 | 描述 | 实例 |
---|---|---|
normal | 默认值。设置正常的混合模式。 | 尝试一下 » |
multiply | 正片叠底模式。 | 尝试一下 » |
screen | 滤色模式。 | 尝试一下 » |
overlay | 叠加模式。 | 尝试一下 » |
darken | 变暗模式。 | 尝试一下 » |
lighten | 变亮模式。 | 尝试一下 » |
color-dodge | 颜色减淡模式。 | 尝试一下 » |
saturation | 饱和度模式。 | 尝试一下 » |
color | 颜色模式。 | 尝试一下 » |
luminosity | 亮度模式。 | 尝试一下 » |
-
background-size
length | 设置背景图片高度和宽度。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为"auto(自动)" |
percentage | 将计算相对于背景定位区域的百分比。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为"auto(自动)" |
cover | 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。 |
contain | 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。 |
实例:
输入框的背景
.mytest{
border:none;
border-bottom: #c0c0c0 1px solid ;
border-radius:0px;
}