background:url(image/road.jpg) no 您所在的位置:网站首页 images/13_html_images.png background:url(image/road.jpg) no

background:url(image/road.jpg) no

2024-07-05 20:26| 来源: 网络整理| 查看: 265

进行网页界面排版时,大家会经常用到background属性,写一些背景图片,颜色之类的,今天我先简单的介绍一下background属性的背景图片是什么样的效果。

首先代码是:   #ban { margin:auto; width:500px; height:500px;border:2px dotted black;background:url(../image/hover_right.png); } 在不写repeat与no-repeat的情况下,默认的是平铺。repeat平铺的效果,就是一张图,可以铺满整个屏幕。效果图如下:

然后我在#ban { margin:auto; width:500px; height:500px;border:2px dotted black; background:url(../image/hover_right.png)  no-repeat; /*不平铺*/ }no-repeat是不平铺,

效果图如下:

center这个值,大家基本上很少去用到,往往也会忽略掉这个center的利用价值。其次我再加一个属性:background:url(../image/hover_right.png) no-repeat  center;它就会居中与div的中心部分,效果图如下:

我今天做网站时,对对整个界面缩小到30%时,背景图片会向左移动,为什么呢,就是没有对它进行center,导致背景图不正常显示且向左偏移。

那就有人说了,我不想让图片居中,我就想让图片向左向下100个像素。可以这样去写: background:url(../image/hover_right.png) no-repeat 100px 100px;

这样解释大家能看的明白嘛?



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有