background:url(image/road.jpg) no-repeat center的基本用法介绍
2019-05-21 11:43
239 查看
进行网页界面排版时,大家会经常用到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;
这样解释大家能看的明白嘛?
相关文章推荐
- background:url(image/road.jpg) no-repeat center的基本用法介绍
- jquery设置背景图片:$(this).css("background-image","url(on.jpg)");就可以了
- jquery设置背景图片:$(this).css("background-image","url(on.jpg)");就可以了
- jquery设置背景图片:$(this).css("background-image","url(on.jpg)");就可以了
- background-image:url(data:image/gif;base64,XXXX) base64方式将本地图片添加到文档中
- background-position 用法详细介绍
- crontab的基本用法介绍
- Puppet笔记:介绍及基本用法
- QML学习之基本元素Rectangle, Text, Button,Image介绍
- Chart(MSChart)基本属性及用法介绍
- background-position 用法详细介绍
- iOS NSFileHandle 基本用法介绍
- HttpURLConnection--HttpURLConnection的基本用法
- background-image中url找不到路径,背景图像无法显示
- iOS NSFileHandle 基本用法介绍
- Python图像处理库:PIL中Image,ImageDraw等基本模块介绍
- c++ stl容器vector删除(erase),遍历等基本用法介绍及头文件
- 外部样式表中Background-Image:url()的设置不能显示解决方案
- SDWebImage的介绍与基本使用
- background-position用法 详细介绍