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>
CSS3 教程 CSS3 入门 CSS3 选择器 CSS3 颜色 CSS3 单位 CSS3 字体 CSS3 文本 CSS3 光标 CSS3 盒子模型 CSS3 边框 CSS3 边距 CSS3 列表 CSS3 表格 CSS3 背景 CSS3 效果 CSS3 浮动 CSS3 定位 CSS3 响应式 CSS3 Columns CSS3 Flex