最近接手前端页面,让给调样式。哥纯粹一个代码程序猿,表示那些个样式应该让前端人员或者美工小妹妹来实现.

书归正传,碰到了问题,页面要在手机上展现,众所周知,手机在中国的牌子很多,很难做到统一。

页面上有五个导航栏,是按百分比设置的,让我搞个背景图,点击某一导航栏的时候,背景改变,BUT,给我的背景图是一张有着固定大小的图片,放上去之后,各种不适应,不和谐,后来就想到如果能让背景图自适应导航栏的宽高不就行了么,非经一番波折,无以成真身。

.zjhn-nav li.active a{ background-image:url(../image/Click_03_temp.png); background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;}

就是这么简单的一句话,设置背景图,并让它100%的适应导航栏宽高,并设置不重复,大小100%就OK了

原文:https://blog.csdn.net/chenqk_123/article/details/44402355

css背景图片充满DIV的更多相关文章

  1. css - 背景图片充满整个屏幕

    body { /* 加载背景图 */ background: url("../static/images/index/backImg.jpg") no-repeat; /* 背景图 ...

  2. div css背景图片不显示

    我们在写页面时,为了便于维护,css样式通常都是通过link外部导入html的,有时在css中写入背景图片时,此时背景图片的路径应该是相对css文件的.比如,此时的文件有index.html,css. ...

  3. css背景图片拉伸 以及100% 满屏显示

    如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在 ...

  4. CSS背景图片定位

    原文:CSS背景图片定位 在网页开发中我们经常需要对图片进行分割(如下图)来使用,而不是分别提供单独的图片来调用,常见的如页面背景,按钮图标等,这样做的好处就是减少请求次数,节省时间和带宽. 对背景图 ...

  5. css背景图片位置:background的position(转)

    css背景图片位置:background的position   position的两个参数:水平方向的位置,垂直方向的位置----------该位置是指背景图片相对于前景对象的 1.backgroun ...

  6. Bootstrap css背景图片的设置

    一. 网页中添加图片的方式有两种 一种是:通过<img>标签直接插入到html中 另一种是:通过css背景属性添加 居中方法:水平居中的text-align:center 和 margin ...

  7. css背景图片位置:background的position

    position的两个参数:水平方向的位置,垂直方向的位置----------该位置是指背景图片相对于前景对象的 1.background:url(../image/header.jpg) no-re ...

  8. CSS实现图片在div a标签中水平垂直居中

    CSS实现图片在div a标签中水平垂直居中 <div class="demo"> <a href="#"> <img src=& ...

  9. 【IE6的疯狂之八】链接伪类(:hover)CSS背景图片有闪动BUG

    IE6下链接伪类(:hover)CSS背景图片有闪动BUG,主要原因ie会再一次请求这张图片,或者说图片没被缓存. 例如: CSS代码 a:hover{background:url(imagepath ...

随机推荐

  1. Spring MVC 使用介绍(十四)文件上传下载

    一.概述 文件上传时,http请求头Content-Type须为multipart/form-data,有两种实现方式: 1.基于FormData对象,该方式简单灵活 2.基于<form> ...

  2. [ZJOI2019]线段树

    题目大意 一开始有一棵线段树,然后有一个操作序列,问执行这个操作序列的所有子集时线段树上有标记的节点个数和. 题解 其实我们把它除以\(2^m\)后发现就是有标记节点的期望个数. 然后套路的根据期望的 ...

  3. Linux-ftp虚拟用户配置

    云服务器ESC 部署vsftpd 虚拟用户 说明:云服务器部署和本地服务器部署一样,都需要开通指定的相应端口,只不过云服务器需要在安全组规则中打开相应的端口允许通过. 环境说明: 对应的用户对应不同的 ...

  4. docker容器网络

    1.我们在使用docker run创建Docker容器时,可以用--net选项指定容器的网络模式,Docker有以下4种网络模式: · host模式,使用--net=host指定 · containe ...

  5. \t \r \n \f

    \t 的意思是 :水平制表符.将当前位置移到下一个tab位置. \r 的意思是: 回车.将当前位置移到本行的开头. \n 的意思是:回车换行.将当前位置移到下一行的开头. \f的意思是:换页.将当前位 ...

  6. c++对象的存储空间

    1. 非静态成员 2. 静态成员变量 静态成员变量不占对象的内存空间 3. 成员函数 成员函数不占内存空间 4. 析构函数 5. 类中有虚析构函数 6. 继承空类和多重继承空类存储空间的计算 7. t ...

  7. 查找修补文件差异diff、patch

    diff patch -p1 diff -Naur directory1 directory2

  8. centos备份多个数据库

    #/bin/bash# the backup dateDATE=`date +%Y%m%d%H%M`#backup pathBACKUP_PATH=/home/backup/mysqldata#get ...

  9. java aes CBC的填充方式发现

    如下的java代码,手动对block进行填充后,使其为16的整数倍后,加密的时候竟然强行再填充了16位,我在尝试用golang实现这段加密时,反复修改了很久,发现golang版的总是比java加密出来 ...

  10. .Net Core的Excel导入

    1.前台代码,layui模板 2.后台代码,后台实现 (1)导入 (2)数据验证 (3)将导入数据存储在数据库中 (4)定义保存导入数据接口 (5)接口的实现调用业务层 (6)业务层接口 (7)业务层 ...