您的位置:首页 > Web前端 > CSS

CSS-10.背景颜色和背景图片

2018-01-29 09:36 295 查看
背景颜色:

使用background-color:red;
背景图片:

使用background-image: url("images/1.jpg");
背景图片的平铺方式:

使用background-repeat: repeat;

一般有四个取值repeat(完全平铺xy),repeat-x(x方向平铺),repeat-y(y方向平铺)

和no-repeat(单一平铺)

应用场景:

一般用于降低网页大小。提升网页的访问的访问速度。
控制背景图片的位置:

使用background-position:水平方向 垂直方向;

取值:

1.具体的方位名词:水平方向:left center right

垂直方向:top center bottom

2.具体的像素:可以用具体px值来控制,例如background-position:200px 100px;

企业开发中的用途:

电脑显示器的分辨率是多种多样的,有大有小,为了让网页上的图片的重要内容居中显示,

图片设计师会制作一个尺寸很大的图片,重要内容居中显示,在我们前端开发中,使用

background-position:center top;就会让重要的图片居中显示,随着浏览器边框的

大小而改变,一直处在中间的状态。
背景的关联方式

是什么:<
4000
/div>

默认情况下背景图片会随着滚动条的滚动而滚动,如果不想让背景图片随着滚动条的滚动

而滚动,我们就可以修改背景图片和滚动条的关联方式

格式:background-attachment:fixed;

默认是scroll,随着滚动条的滚动而滚动

fixed,不会随着滚动条的滚动而滚动
背景属性缩写的格式
background:背景颜色 背景图片 平铺方式 关联方式 定位方式;例如:
background:red url(images/girl.jpg) no-repeat left bottom
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: