CSS3 背景

背景颜色

background-color

<div style="width: 640px; height: 50px; background-color: #ffe121;"></div>

效果

背景图片

background-image

<div style="width: 640px; height: 452px; background-image: url('/public/home/img/fly.jpg');"></div>

效果

背景重复

background-repeat

<!-- background-repeat: repeat; 默认背景图片一直重复到填满容器 -->
<!-- background-repeat: repeat-x; 横向重复 -->
<!-- background-repeat: repeat-y; 纵向重复 -->
<!-- background-repeat: no-repeat; 取消重复 -->

<div style="width:265px ;height:200px; background-color: #eee; background-repeat: repeat-x; background-image: url('public/home/img/flower.png')"></div>

效果

图片尺寸

background-repeat

<!-- background-size: auto | 原图，默认值 -->
<!-- background-size: 长 宽 -->
<!-- background-size: contain | 拉伸填满 -->
<!-- background-size: cover | 等比例裁剪填满 -->

<div style="width:640px ;height:452px;  background-color: #eee; background-image:url('/public/home/img/fly.jpg'); background-repeat: no-repeat; background-size: 320px 226px;"></div>

效果

图片位置

background-position

<!-- background-position: 水平位置 垂直位置 -->

<div style="width:640px ;height:452px;  background-color: #eee; background-image:url('/public/home/img/fly.jpg'); background-repeat: no-repeat; background-size: 320px 226px; background-position: 50% 50%;"></div>

效果

固定背景

background-attachment

<!-- background-attachment: fixed; 不被滚动条拖动 -->

<div style="width: 640px; height: 200px; background-image: url('/public/home/img/fly.jpg'); background-attachment: fixed;"></div>

效果

简写

background

<!-- 常用的一组配搭 | background: 图片地址 是否重复 显示位置 -->

<div style="background: url('...') no-repeat 50% 50%"></div>