css背景图片充满DIV
最近接手前端页面,让给调样式。哥纯粹一个代码程序猿,表示那些个样式应该让前端人员或者美工小妹妹来实现.
书归正传,碰到了问题,页面要在手机上展现,众所周知,手机在中国的牌子很多,很难做到统一。
页面上有五个导航栏,是按百分比设置的,让我搞个背景图,点击某一导航栏的时候,背景改变,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的更多相关文章
- css - 背景图片充满整个屏幕
body { /* 加载背景图 */ background: url("../static/images/index/backImg.jpg") no-repeat; /* 背景图 ...
- div css背景图片不显示
我们在写页面时,为了便于维护,css样式通常都是通过link外部导入html的,有时在css中写入背景图片时,此时背景图片的路径应该是相对css文件的.比如,此时的文件有index.html,css. ...
- css背景图片拉伸 以及100% 满屏显示
如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在 ...
- CSS背景图片定位
原文:CSS背景图片定位 在网页开发中我们经常需要对图片进行分割(如下图)来使用,而不是分别提供单独的图片来调用,常见的如页面背景,按钮图标等,这样做的好处就是减少请求次数,节省时间和带宽. 对背景图 ...
- css背景图片位置:background的position(转)
css背景图片位置:background的position position的两个参数:水平方向的位置,垂直方向的位置----------该位置是指背景图片相对于前景对象的 1.backgroun ...
- Bootstrap css背景图片的设置
一. 网页中添加图片的方式有两种 一种是:通过<img>标签直接插入到html中 另一种是:通过css背景属性添加 居中方法:水平居中的text-align:center 和 margin ...
- css背景图片位置:background的position
position的两个参数:水平方向的位置,垂直方向的位置----------该位置是指背景图片相对于前景对象的 1.background:url(../image/header.jpg) no-re ...
- CSS实现图片在div a标签中水平垂直居中
CSS实现图片在div a标签中水平垂直居中 <div class="demo"> <a href="#"> <img src=& ...
- 【IE6的疯狂之八】链接伪类(:hover)CSS背景图片有闪动BUG
IE6下链接伪类(:hover)CSS背景图片有闪动BUG,主要原因ie会再一次请求这张图片,或者说图片没被缓存. 例如: CSS代码 a:hover{background:url(imagepath ...
随机推荐
- Django学习目录
Django学习目录 Django框架简介 Django基础 >>点我 ORM介绍 Django中ORM介绍 >>点我 ORM表操作 Django中ORM表相关操作 >& ...
- 20175209 《Java程序设计》第七周学习总结
20175209 <Java程序设计>第七周学习总结 一.教材知识点总结 第八章 常用类和实用类 1.String类 构造String对象 常量对象:""中的字符序列, ...
- C#调用Java的WebService添加SOAPHeader验证
C#调用Java的WebService添加SOAPHeader验证(2) 1.问题描述 调用的Java的webservice string Invoke(string func, string req ...
- flask websocker
WebSocket 是一种网络通信协议.RFC6455 定义了它的通信标准. HTTP 协议是一种无状态的.无连接的.单向的应用层协议.它采用了请求/响应模型.通信请求只能由客户端发起,服务端对请求做 ...
- 关于APP测试的一点思考
1 系统入口部分要细化测试用例颗粒度 充分准备好测试数据 真实覆盖线上场景 比如注册验证码的获取 国内 国外手机 一般国外手机发送短信 打电话都要加上区号 2 新版本发布 有新功能上线 ...
- MySQL巧建sum索引帮我们提高至少100%的效率
有两个表,表a CREATE TABLE `a` ( `id` mediumint() unsigned NOT NULL AUTO_INCREMENT, `fid` ) unsigned ', `c ...
- oi回忆录
堆在一起写成流水账好了,算是记录一下自己的oi历程. [伊始] 一直到高中以前,我从来没有接触过任何oi相关的东西. 直到初三的那个暑假,在去金中报名的时候,报名表上面有一栏要填暑假想参加的夏令营. ...
- HTTP常见的状态码——面试题常考
一些常见的状态码为: 200 - 服务器成功返回网页 400(错误请求)服务器不理解请求的语法. 404 - 请求的网页不存在 500(服务器内部错误)服务器遇到错误,无法完成请求. 503 - 服 ...
- win 域
域/AD域/域环境: 1.域:Domain 2.微软技术:1)工作组:平等 2)域 3.主要优点:集中管理/统一管理 4.域成员:1)域控制器:DC 2)成 ...
- 四五月份:关键词是沟通、绘画和SQL
例行总结一下四五月份的感受. 关键词有三个:沟通.绘画和SQL. 整体来说,这两个月在努力跟这三个关键词死磕,略有些进展,因此汇报一下. 虽然这三个关键词从重要度来说是从左到右的,但从叙述来讲,还是先 ...