一天搞定CSS：背景background--03
生活随笔
收集整理的这篇文章主要介绍了
一天搞定CSS：背景background--03
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
背景分为—背景颜色和背景图片
1.背景属性
2.背景颜色
代码演示：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>div{width: 300px;height: 300px;border: 10px solid red;/*背景颜色三种表示方法:颜色的单词,rgb,16进制*/background-color:green;background-color: rgb(0,0,0);background-color:#008800;}</style></head><body><div></div></body> </html>3.背景图片
背景图片有：位置 重复性
代码演示：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>div{width: 300px;height: 300px;border: 10px solid red;/*背景图片*/background-image:url(images/img.jpg);/*背景图片是否重复：repeat* repeat-x横向重复* repeat-y纵向重复* no-repeat不重复* */background-repeat: no-repeat;background-repeat: repeat-x;background-repeat: repeat-y;/*background-position:x y; 背景图片的位置传数值：（背景图片离左上角的距离）x:正值 从容器的左边往右边走的距离负值 从容器的左边往左边走的距离y:正值 从容器的上边往下边走的距离负值 从容器的上边往上边走的距离传关键字x:left 图片在容器的左边center 图片在容器X轴的中心right 图片在容器的右边y:top 图片在容器的上边center 图片在容器Y轴的中心bottom 图片在容器的下边* */background-position: 5px 10px;}</style></head><body><div></div></body> </html>总结
以上是生活随笔为你收集整理的一天搞定CSS：背景background--03的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： 一天搞定CSS：边框border--02
- 下一篇： 一天搞定CSS：字体font--04