html文档中怎么把图片作为背景?


本文摘自PHP中文网,作者青灯夜游,侵删。

在html中,可以通过给body标签设置css background或background-image样式来把图片作为背景,语法格式“background/background-image:url("图片路径");”。

(推荐教程:html教程)

html文档中可以使用css background或background-image属性将图片设置为背景,background可以在一个声明中设置所有背景属性,background-image指定要使用的一个或多个背景图像

background可以设置的属性分别是:background-color、background-position、background-size、background-repeat、background-origin、background-clip、background-attachment 和 background-image。

各值之间用空格分隔,不分先后顺序。可以只有其中的某些值,例如 background:#FF0000 URL(smiley.gif); 是允许的。

示例:把图片作为背景

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

<html>

<head>

<style type="text/css">

body

{

background: url(bg.jpg) ;

/*background-image: url(bg.jpg);*/

}

</style>

</head>

 

<body>

<p>这是一些文本。</p>

<p>这是一些文本。</p>

<p>这是一些文本。</p>

<p>这是一些文本。</p>

<p>这是一些文本。</p>

<p>这是一些文本。</p>

<p>这是一些文本。</p>

<p>这是一些文本。</p>

<p>这是一些文本。</p>

<p>这是一些文本。</p>

<p>这是一些文本。</p>

<p>这是一些文本。</p>

<p>这是一些文本。</p>

<p>这是一些文本。</p>

<p>这是一些文本。</p>

<p>这是一些文本。</p>

<p>这是一些文本。</p>

<p>这是一些文本。</p>

<p>这是一些文本。</p>

<p>这是一些文本。</p>

<p>这是一些文本。</p>

<p>这是一些文本。</p>

<p>这是一些文本。</p>

<p>这是一些文本。</p>

</body>

 

</html>

效果图:

1.png

这是多张图片平铺,如果想要一张图片占全屏,可以使用background-repeat属性,或在background属性上添加no-repeat值。

阅读剩余部分

相关阅读 >>

post提交获得Html页面源码的实现代码

实例详解Html如何实现文件间自由切换

css如何清除浮动?clear和bfc方法介绍

sHtmlHtml的区别是什么

Html a怎么禁止点击

css中怎么插入表格

Html怎么设置背景图片

css中无继承性的属性有哪些

怎样做出Html文本框只读效果

Html5中关于div与span Html块级元素的详细介绍

更多相关阅读请进入《Html》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...