CSS背景图像之基础属性

 时间:2024-10-22 04:19:31

1、一.background-color,背景颜色,这个属性比较简单,.z1 { background-color: #F00;}当然,也可以这样写,用英文字母代替,.z1 { background-color: red;}完整代码如下;<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">.z1 { background-color: red;}</style></head><body><div class="z1">我喜欢数学</div></body></html>在浏览器的效果如下图:

CSS背景图像之基础属性

2、二:background-image,以图片为背景,代码写法:.z1 { background-image: url(../Pictures/DNF/300.jpg);}url(../Pictures/DNF/300.jpg)表示图片的路径。

CSS背景图像之基础属性

3、三:background-repeat,这个属性定义了图像的平铺模式,其中他有四个属性值,repeat-x:背景图像将在水平方向重复。repeat-y:背景图像将在垂直方向重复。no-repeat:背景图像将在垂直方向重复。repeat:默认。背景图像将在垂直方向和水平.代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">body { background-image: url(../Pictures/DNF/901.png); height: 100%; width: 100%; font-size: 18px; color: #F00; background-repeat: repeat-y;}</style></head><body><p>我喜欢吃橘子</p></body></html>

4、repeat-x:如图:

CSS背景图像之基础属性

5、repeat-y:如图:

CSS背景图像之基础属性

6、no-repeat:如图:

CSS背景图像之基础属性

7、repeat:默认,如图:

CSS背景图像之基础属性

8、四.background-attachment:属性设置背景图像是否固定或者随着页面的其余部分滚动,fixed,当页面的其余部分滚动时,背景图像不会移动。scroll,默认值。背景图像会随着页面其余部分的滚动而移动。inherit,规定应该从父元素继承 background-attachment 属性的设置.

9、五.background-position,设置背景图像的起始位置。body { background-image: url(../Pictures/DNF/901.png); background-repeat: no-repeat; background-position: 50px 50px;}background-position: 50px 50px;表示背景图像离水平距离50px,垂直距离50px的位置。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">body { background-image: url(../Pictures/DNF/901.png); height: 100%; width: 100%; font-size: 18px; color: #F00; background-repeat: no-repeat; background-position: 50px 50px;}</style></head><body><p>我喜欢吃橘子</p></body></html>

CSS背景图像之基础属性
  • 用div控制三块分别显示红色、黄色、蓝色
  • Navicat如何切换到数据表设计视图#校园分享#
  • html如何设置字体大小
  • css怎么点导航显示菜单栏
  • 初识DreamWeaver软件-如何下载安装
  • 热门搜索
    初中英语手抄报图片 勤俭廉政手抄报内容 法制进校园手抄报 家庭文明公约手抄报 文明交通我见证手抄报 关于体育精神的手抄报 祖国发展我成长手抄报 环保小报手抄报 手抄报古诗 快乐阅读手抄报内容