CSS中背景图像

来源:互联网 发布:网络模块的单词 编辑:程序博客网 时间:2024/05/16 14:30
<!-- 背景图像
background-image属性描述的元素的背景图像 
默认的情况之下,背景图像进行的是平铺重复的显示,用来覆盖元素的实体
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
     body{
      background-image: url('../pic/124.gif');
      background-color:red;
     }
    </style>
<title></title>
</head>
<body>
<h1>hello World</h1>
</body>
</html>
在这个程序中我们主要是对background-image这个属性的一个应用
这个属性的值是一个url也就是我们的图片的地址,当图片和背景颜色在一起的时候,图片会将背景颜色覆盖,在选择背景图片的时候,我们一定要着重的选择,选择的文字和背景图像能相容,文字易读看 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
     body{
      background-image: url(../pic/123.jpg);
     }
     h1{
         color:red;
     }
    </style>
<title>文字看不清楚</title>
</head>
<body>
<h1>Hello world</h1>
</body>
</html>
在这个程序中我们要注意的是当我想改变字体的颜色的时候
我想在h1{font-style:red}但是这样没有改变字体的颜色,原来我们忘了
字体的 颜色的设置也就是对h1的设置,因此我们没有必要去考虑对字体的 
设置,而是简简单单的对直接设置颜色就行了 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
     body{
      background-image:url(../pic/123.jpg);
     }
     </style>
<title>设置背景颜色</title>
</head>
<body>
</body>
</html>
在这个歌程序中我们看到是什么,默认的一种图片放置方法 
默认的情况之下background-image属性是会在页面的水平或者是
垂直的方向上平铺,但是有些时候这样来设置图片并不是很美观的,我们
有没办法来改变图片的铺排的方式
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
     body{
      background-image:url(../pic/123.jpg);
      background-repeat:repeat-y;
     }
    </style>
<title>图像的铺排的方式</title>
</head>
<body>
</body>
</html>
 在这程序中我们额可以学到的另外的一个style的属性是有助于我们对界面的
布置更加的美观,因为,这个background-image是决定着我们的铺排的方向 -->
0 0
原创粉丝点击