《图解CSS》背景

CSS的背景可以为元素添加背景颜色(background-color)和背景图片(backgroud-image), CSS3也提供了背景使用多张图片和渐变色的功能。

CSS背景属性

  • background-color:设置元素的背景颜色。
  • background-image:把图像设置为背景。
  • background-repeat:设置背景图像是否及如何重复。
  • backgroud-position:设置背景图像的起始位置。
  • background-size:设置背景图片大小。
  • background-attachment:背景图像是否固定或者随着页面的其余部分滚动。
  • background:(简写属性)作用是将背景属性设置在一个声明中。
  • background-clip, background-origin,background-break(目前尚未得到广泛支持)


更多可参考MSDN:https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference

背景颜色

语法:

div{background-color:'red'}
div{background-color:rgb(255,0,0)}
div{background-color:rgba(255,0,0,0.5)}

至于颜色的的可选值可以参看《CSS简介》颜色值一节。
示例:


背景图片

语法:

background-image:url('url');

示例:
background-image:url('https://www.baidu.com/img/flexible/logo/pc/result.png');

从示例中可以看出,默认是水平垂直重复,那么如何控制背景重复呢?

背景重复

语法:

background-repeat:no-repeat;
background-repeat-x:no-repeat;
background-repeat-y:no-repeat;

示例:


背景位置

除此之外,还可以设置背景的起始位置。
语法:

background-position:position;

background-position 属性有5个关键字值,分别是top 、 left 、 bottom 、 right 和 center,这些关键字中的任意两个组合起来都可以作为该属性的值。


背景尺寸

语法:

background-size:50%;
background-size:100px 50px; // 宽100,高50
background-size:cover; // 拉大图片,完全填满,保持宽高比
background-size:contain; // 缩放图片,使其恰好适合背景区,保持宽高比

示例:


背景粘附

background-attachment 属性控制滚动元素内的背景图片是否随元素滚动而移动。这个属性的默认值是scroll ,即背景图片随元素移动。如果把它的值改为 fixed ,那么背景图片不会随元素滚动而移动。
示例:


背景简写

background 简写属性在一个声明中设置所有的背景属性。
可以设置如下属性:

  • background-color
  • background-position
  • background-size
  • background-repeat
  • background-origin
  • background-clip
  • background-attachment
  • background-image
    示例:
background:url('https://www.baidu.com/img/flexible/logo/pc/result.png') no-repeat center ;

多背景图片

语法:

background:
url('') no-repeat 10px 0px...,
url('') no-repeat 10px 60px...,
url('') no-repeat 10px 120px...;

背景渐变

渐变分两种,一种线性渐变,一种放射性渐变。线性渐变从元素的一端延伸到另一
端,放射性渐变则从元素内一点向四周发散。

线性渐变语法:
/* 渐变轴为45度,从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);

/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);

/* 从下到上,从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);

更多可参考:https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient()

放射性渐变语法:
background: radial-gradient(#e66465, #9198e5);

background: radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);

background: radial-gradient(circle at 100%, #333, #333 50%, #eee 75%, #333 75%);

background: radial-gradient(ellipse at top, #e66465, transparent),
            radial-gradient(ellipse at bottom, #4d9f0c, transparent);

更多可参考:https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient()

其他属性

  • background-clip 。控制背景绘制区域的范围,比如可以让背景颜色和背景图片只出现在内容区,而不出现在内边距区域。默认情况下,背景绘制区域是扩展到边框外边界的。
  • background-origin 。控制背景定位区域的原点,可以设定为元素盒子左上角以外的位置。比如,可以设定以内容区左上角作为原点。
  • background-break 。 控制分离元素(比如跨越多行的行内盒子)的显示效果。

你可能感兴趣的:(《图解CSS》背景)