【CSS】div的背景图完整图片覆盖
最初的代码:
.container_first {
width: 100%;
height: 100%;
background: url(10176581.jpg);
background-size: cover;
position: relative;
}
因为UI交给我的图片是按照iPhone6的尺寸来的,在iPhone4上面用cover的话覆盖的背景图是不完整的下面缺失
更改后的代码:
.container_first {
width: 100%;
height: 100%;
background: url(10176581.jpg);
background-size: 100% 100%;
position: relative;
}
改为 background-size: 100% 100%;后图片完整显示 虽然有些扁但相信没人用iPhone4了吧....
当然也可以用媒体查询这里就偷懒了
【CSS】div的背景图完整图片覆盖的更多相关文章
- DIV+CSS+PS实现背景图的三层嵌套以及背景图的合并
传说中的“三层嵌套技术”. 一.背景图合并: div+css+ps合图相结合的技术:通过精确到1px的css设置,使用ps合成背景图片,特别是小图片合并,来完成页面效果. 首先讲讲三层 ...
- 精通CSS+DIV网页样式与布局--图片效果
提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过 ...
- css — 定位、背景图、水平垂直居中
目录 1. 定位 2. 背景图 3. 水平垂直居中 1. 定位 position:static | relative | absolute | fixed; static 静态定位 relative ...
- webpack中,css中打包背景图,路径报错
css-loader: //打包样式中背景图 { test: /\.(png|jpg)$/, loader: "url-loader?limit=8192&name=images/[ ...
- vue-cli构建的vue项目打包后css引入的背景图路径不对的问题
使用vue-cli构建vue项目后,再打包遇到一个css引入的背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常 ...
- Lodop背景图无图片时显示放大叉号问题
正常情况下,如果指定图片路径中,图片不存在或指定错误的路径,会因为找不到图片显示叉号,Lodop背景图如果设置了背景图宽度高度控制,显示的叉号也会被相应的放大,形成放大的模糊的图案,看起来就像是黑色边 ...
- HTML引用CSS实现自适应背景图
链接图片背景代码 body {background: url('链接') no-repeat center 0;} 颜色代码 body{background:#FFF} 链接图片背景代码2 <b ...
- 关于CSS设置页面背景图的一些疑问
关于背景图片的位置其background-position设置背景图片的位置有两种方式,一种是是根据像素设置,第二种根据百分比设置,第一种根据像素的位置是很简单的,只是关于百分比这个设置理解特别容易出 ...
- ios 拉伸背景图中间图片不变四周拉伸
上图中间区域的翅膀不能变形,Android的点九能很好的解决,但是iOS的stretchableImageWithLeftCapWidth没法一次性指定拉伸区域,最后发现https://www.jia ...
随机推荐
- SVN连接不上仓库,问题之一
如果之前用过SVN,在新的地址上用,发现一直连不上,报错.有可能是因为默认使用了之前的地址,所以没弹出输账号和密码的弹框. 解决方法就是:把之前的链接地址全部清除掉. 右键找到SVN里面的 Sett ...
- PHP7.1以上版本 count()报错
报错信息如下: count(): Parameter must be an array or an object that implements Countable (View: D:\fookusy ...
- 理解Java主函数中的"String[] args"
public class Understand_String_args { public static void main(String[] args) { System.out.printf(&qu ...
- Cloudera Hadoop启用Kerberos认证
一.Kerberos 二.安装 node01服务器安装Kerberos的核心服务master KDC,node02和node03安装Kerberos client cm也安装在node01上了 1.m ...
- Spring解决循环依赖
1.Spring解决循环依赖 什么是循环依赖:比如A引用B,B引用C,C引用A,它们最终形成一个依赖环. 循环依赖有两种 1.构造器循环依赖 构造器注入导致的循环依赖,Spring是无法解决的,只能抛 ...
- hdu 4352 XHXJ's LIS (数位dp+状态压缩)
Description #define xhxj (Xin Hang senior sister(学姐)) If you do not know xhxj, then carefully readin ...
- Vuetify按需加载配置
自己配置vuetify按需加载的步骤,在此记录: 执行npm install vuetify –save 或 yarn add vuetify添加vuetify添加依赖执行npm install -- ...
- (转)图文详解MyEclipse中新建Maven webapp项目的步骤
转:https://blog.csdn.net/ClementAD/article/details/46592557 MyEclipse中创建新的Maven项目(webapp目录结构)过程如下: ...
- MySQL 下载,安装,配置windows 服务
本次使用的是压缩包的方式是可以纯手动自己折腾各种配置... ok,闲话少叙,我们准备发车... 一.先要去mysql官网去下载压缩包咯 ①下载地址:https://dev.mysql.com/down ...
- 其他信息: 未能加载文件或程序集“WebGrease, Version=1.5.1.25624, Culture=neutral, PublicKeyToken=31bf3856ad364e35”或它的某一个依赖项。找 到的程序集清单定义与程序集引用不匹配。 (异常来自 HRESULT:0x80131040)
记录一下,发布web时遇到的一些问题. 一.报错信息: 其他信息: 未能加载文件或程序集“WebGrease, Version=1.5.1.25624, Culture=neutral, Public ...