您的位置：首页 > Web前端 > CSS

CSS中背景图像

2015-08-16 16:40 489 查看
<!-- 背景图像

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是决定着我们的铺排的方向 -->
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航