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

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

页面上有五个导航栏,是按百分比设置的,让我搞个背景图,点击某一导航栏的时候,背景改变,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. 用Python将一个列表分割成小列表

    用Python将一个列表分割成小列表 2018年01月15日 11:09:25 幸福丶如此 阅读数:16842   版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.cs ...

  2. 小米Play获取ROOT权限的经验

    小米Play通过什么方式开通了Root权限?大家知道,android机器有Root权限,一旦手机开通了root相关权限,就能够实现更多的功能,举个栗子大家企业的营销部门,使用一些营销应用都需要在Roo ...

  3. 记录一次有意思的XSS过滤绕过2

    前几天在漏洞挖掘中遇到个xss,感觉绕过过程蛮有意思的,写篇文章记录下. 接下里是我对这个xss详细的分析和绕过 存在问题站点http://******/index/appInfo?appId=784 ...

  4. 树莓派中QT实现PWM

    树莓派中QT实现PWM 在QT中实现 PWM 使用的驱动为 wiringPi 之前的博客中已经介绍了 wiringPi , BOARD 管脚, BCM 之间的关系 这次, 就介绍在 wiringPi ...

  5. noi.ac309 Mas的童年

    题目链接 题面 题目描述 \(Mas\)完成了一天的工作,走在回家的路上,看着路边的景色,他想起来自己的童年. 许许多多的记忆交错,丝丝缕缕的牵扯着\(Mas\). 在回忆的深处,\(Mas\)想起来 ...

  6. [C#] .NET4.0中使用4.5中的 async/await 功能实现异步

    在.NET Framework 4.5中添加了新的异步操作库,但是在.NET Framework 4.0中却无法使用.这时不免面临着抉择,到底是升级整个解决方案还是不使用呢? 如果你的软件还没发布出去 ...

  7. 用户认证授权和Shiro入门

    1.权限管理基础(认证和授权): 前言 本文主要讲解的知识点有以下: 权限管理的基础知识 模型 粗粒度和细粒度的概念 回顾URL拦截的实现 Shiro的介绍与简单入门 一.Shiro基础知识 在学习S ...

  8. arrow function and bind

    Can you bind arrow functions? https://stackoverflow.com/questions/33308121/can-you-bind-arrow-functi ...

  9. windows查看已连接WIFI密码

    找到wifi图标. 右键,选择打开“网络和internet设置”,选择状态. 选择更改适配器设置. 选择你所连接的WIFI网络. 右键,选择状态. 选择无线属性. 选择安全. 勾选显示字符.

  10. AQS学习笔记之独占锁

    作用 参与 共享锁 acquireShared() 和 独占锁 acquire() 的抢锁逻辑, 具体的抢锁逻辑不作实现,只对第一次抢锁未抢到锁线程做处理,第一次抢锁就抢到的线程就不需要遇到AQS了 ...