css 如何设置 body 背景由两张(多张)图片组成,如头部一张图和底部一张图

html-css013

css 如何设置 body 背景由两张(多张)图片组成,如头部一张图和底部一张图,第1张

#example1 {

background-image: url(img_flwr.gif), url(paper.gif)

background-position: right bottom, left top

background-repeat: no-repeat, repeat

}

http://www.runoob.com/css3/css3-backgrounds.html

1、打开vscode,创建一个html页面。

2、在测试页面的同级目录,添加一张演示图片。

3、在测试页面中添加一个div标签,在标签内部添加一个img图片标签,设置图片的src地址。

4、在div的标签中,直接书写css的样式,设置div的宽度为500像素,高度为300像素,边框为1像素的红色框。再次在浏览器中打开,就可以看到图片,并没有填满整个div的空间。

5、想要让图片充满整个div,只需要对图片设置高宽都是100%即可。此处为了演示,将所有的img标签都设置成了100%,而且,使用的是外部css的书写形式。

6、如果图片使用的是背景图,不是img标签的形式,图片默认会在x和y轴重复,并不会拉伸,最终仍然填满了这个div的空间。

7、如果想要背景图也拉伸填满整个div空间,就需要设置背景图的,background-size: 100% 100%。

CSS显示一个大图片中的多个小图标,主要是用background-position这个属性来控制的。

首先先将放置背景小图标的元素的大小设置成图片里图标的实际大小,用width和height设置,然后用background-image把背景图片放进去,比如:

.showImage{

background-image: url(9pic2.jpg)

width: 100px

height: 100px

}

然后用background-position属性调整背景图片的位置,它有两个值分别表示背景图片沿着x和y轴移动的距离。

扩展资料

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。

选择器就是需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成,属性是设置的样式属性(style attribute),每个属性都有一个值,属性和值用冒号分隔。CSS 声明总是以分号 结束,声明组以大括号 {...} 括起来。为了让 CSS 可读性更强,可以每行只描述一个属性。

CSS 注释是用来解释代码,并且可以随意编辑,浏览器会忽略它。CSS注释以 "/*" 开始,以 "*/" 结束。

当读到一个样式表时,浏览器会根据它来格式化 HTML 文档。CSS 创建样式表有三种方法:内联样式、内部样式、外部样式。