定义背景图片的位置

  • 2020-01-02 14:46:01
  • 阅读次数:
  • 作者:盈岚科技小编
  • 来源:http://www.lyjtt.cn

默认情况下,背景图片都是从设置了back-ground属性的标记的左上角开始出现,但实际制作网页过程中,可能希望图片出现在指定的位置。在CSS中使用background-position来调整图片的位置,该属性用法如下:

background-position: position|数值

网页设计中,position可以是center、center center、top left、top center、top right、center left、cen-ter right、bottom left、bottom center、bottomright;数值可以是百分数,如background-posi-tion:40% 60%,表示背景图片的中心点在网页设计时水平方向上处于40%的位置,在竖直方向上处于60%的位置,此时如果改变浏览器的大小,背景图片也会相应地调整,但始终处于40%和60%的位置,除了百分数,还可以是具体的数值,如background-posi-tion:200px 40px,表示距离页面左侧200px,距离页面顶部40px,但是此时如果浏览器大小改变,图片不会做出相应调整,可能会出现图片显示不全的现象。

【示例】启动Dreamweaver,新建一个网页,保存为test.html,在<head>标签内添加<styletype="text/css">标签,定义一个内部样式表,然后输入下面样式:

body{ /*页面基本属性*/    padding:0px;

margin:0px;    

background-image:url(images/1.jpg);   /*背景图片*/    

background-repeat:no-repeat;          /*不重复*/    

background-position:bottom right;     /*背景位置,右下*/    

background-color:#0066CC;}p{ /*段落样式*/    

line-height:1.6em;    

margin:0px; font-size:14px;    

padding-top:10px;    

padding-left:6px; 

padding-right:8px;}

然后在<body>标签中输入如下代码:

<h1>可爱的企鹅</h1>

<p>去南极,第一个想到的就是企鹅,那毛茸茸的肉嘟嘟的样子非常可爱。我们第一次登陆就是去看它,兴奋的心情和期待的心情交织在一起,但是,真正踏上南极半岛的一瞬间不是因为看到企鹅而兴奋,而是因为企鹅在自己的脚边而惊讶。……</p>

显示结果如图所示。从图中可以看出,图片位于页面右下方。

4e7c7ce6d867aa732b563f86fd855eb5.jpg

当前文章标题:定义背景图片的位置

当前URL:http://www.lyjtt.cn/news/wzzz/3152.html

上一篇:网页设计中背景图片的重复

下一篇:在网页设计中设置带花纹边框(一)

网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)