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

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

页面上有五个导航栏,是按百分比设置的,让我搞个背景图,点击某一导航栏的时候,背景改变,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. 关键字:This(上)

    对象初始化内存图: this 是一个关键字,表示对象本身,本质上this中存有一个引用,引用对象本身. this用于访问本对象属性,同时解决局部变量和成员变量同名的问题(接有参构造中第二种解决方案.. ...

  2. springMVC统一异常处理

    Spring MVC处理异常有3种方式: 使用Spring MVC提供的简单异常处理器SimpleMappingExceptionResolver: 实现Spring的异常处理接口HandlerExc ...

  3. 不用代码就能实现get与post

    这些天在测试各种API,每次都敲代码实现,就显得有点浪费时间了 为了节约时间,提高效率,我想着收集一些可以只用 -命令行- 或者是 -浏览器- 就能够实现的技巧 在这里,我简单测试三种工具来实现 ge ...

  4. python之路day11--装饰器形成的过程、作用、装饰器的固定模式

    装饰器形成的过程# 装饰器的作用# 原则:开放封闭原则#装饰器的固定模式 import time # print(time.time()) #1551251400.416998 当前时间() #让程序 ...

  5. 说说PC站和移动站的移动适配关系优化

    曾经写过关于手机网站的SEO优化方向,但是多数是注重在移动网站代码方面,而把移动和PC的重点关系优化给忽略了,这方面也是很多做SEO优化站长给忽略的一些事情. 2015年11月6日,在百度站长平台可以 ...

  6. android studio 报红解决

    /Users/houzhibin/gradle/wrapper/dists/gradle-4.1-all/bzyivzo6n839fup2jbap0tjew/gradle-4.1-all.zip

  7. (八) Usb摄像头描述符解析

    目录 Usb摄像头描述符解析 总结 参考资料 打印设备描述符 打印配置描述符 打印接口联合体描述符 打印接口描述符 打印当前设置的额外描述符 代码解析额外的描述符 打印端点描述符 title: Usb ...

  8. 自搭的一个系统框架,使用Spring boot+Vue+Element

    基于:jdk1.8.spring boot2.1.3.vue-cli3.4.1 特性:    ~ 数据库访问使用spring data jpa+alibaba druid    ~ 前后端数据交互使用 ...

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

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

  10. Promise库

    标准 https://promisesaplus.com/ An open standard for sound, interoperable JavaScript promises—by imple ...