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 ...
随机推荐
- 在Ubuntu 18.04系统上安装Systemback的方法(抄)
在Ubuntu 18.04系统上安装Systemback的方法 2018-12-26 21:39:05作者:林莉稿源:云网牛站 本文介绍如何在Ubuntu 18.04或者Ubuntu 18.10系统上 ...
- java UTC时间格式化
import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Date; import ja ...
- Docker 命令查询
Docker — 从入门到实践 Docker 命令查询 基本语法 Docker 命令有两大类,客户端命令和服务端命令.前者是主要的操作接口,后者用来启动 Docker Daemon. 客户端命令:基本 ...
- BZOJ 2302: [HAOI2011]Problem c(数学+DP)
题面: bzoj_2302 题解: 令\(dp[i][j]\)表示编号 \(\leq i\)的人有j个的方案数: \(cnt[i]\)表示编号指定为\(i\)的人数,\(sum[i]\)表示编号可以\ ...
- GWAS: 阿尔兹海默症和代谢指标在大规模全基因组数据的遗传共享研究
今天要讲的一篇是发表于 Hum Genet 的 "Shared genetic architecture between metabolic traits and Alzheimer's d ...
- ECS集群管理docker
1. create ECR Repositories on AWS a. local server need install git/docker/awscli b. config aws: use ...
- scws安装
mkdir scws cd scws wget http://www.xunsearch.com/scws/down/scws-1.2.3.tar.bz2 tar xvjf scws-.tar.bz2 ...
- redis3.2.10单实例安装测试
redis3.2.10单实例安装测试 主要是实际使用环境中使用,为了方便快速部署,特意记录如下: # root用户 yum -y install make gcc-c++ cmake bison-de ...
- codeforces-1132 (div2)
A.发现b的个数没有意义,a不等于d一定不可行,c不管多少都算一个,如果只有c没有ad也不可行 #include <map> #include <set> #include & ...
- [转载]如何在ubuntu上使用github
来源:https://blog.csdn.net/tina_ttl/article/details/51326684 https://blog.csdn.net/u013551462/article/ ...