【CSS】div的背景图完整图片覆盖

最初的代码:

1 .container_first {
2     width: 100%;
3     height: 100%;
4     background: url(10176581.jpg);
5     background-size: cover;
6     position: relative;
7 }

因为UI交给我的图片是按照iPhone6的尺寸来的,在iPhone4上面用cover的话覆盖的背景图是不完整的下面缺失

更改后的代码:

1 .container_first {
2     width: 100%;
3     height: 100%;
4     background: url(10176581.jpg);
5     background-size: 100% 100%;
6     position: relative;
7 }
改为 background-size: 100% 100%;后图片完整显示 虽然有些扁但相信没人用iPhone4了吧....当然也可以用媒体查询这里就偷懒了
时间: 2024-10-13 13:41:39

【CSS】div的背景图完整图片覆盖的相关文章

精通CSS+DIV网页样式与布局--图片效果

提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过照片处理软件轻松实现自己想要的照片效果.这篇博客,小编将继续来总结CSS+DIV的其她效果来进行分析,有兴趣的小伙伴可以点击以下链接,了解小编之前讲解过的关于CSS的一些基础知识:     精通CSS+DIV网页样式与布局--初探CSS 精通CSS+DIV网页样式与布局--CSS文字效果 精通CSS

webpack中,css中打包背景图,路径报错

css-loader: //打包样式中背景图 { test: /\.(png|jpg)$/, loader: "url-loader?limit=8192&name=images/[hash:8].[name].[ext]" //limit参数,代表如果小于大约4k则会自动帮你压缩成base64编码的图片,否则拷贝文件到生产目录 //name后面是打包后的路径: //loader 后面 limit 字段代表图片打包限制,这个限制并不是说超过了就不能打包,而是指当图片大小小于限制

CSS 背景图拉伸 兼容 FF Chrome IE 等主流浏览器(转)

注:本文欢迎转载,以下为本人亲测,转载请注明:http://blog.csdn.net/wqmain/article/details/8844286 相信各位一定碰到过这种情况,按钮作为DIV的背景图来显示,实际上有多个这样的按钮,而且DIV中的文字,也就是按钮上要显示的文字内容和个数都 不定,这种情况下就需要用背景图片拉伸效果来处理了,只需做一个按钮图片,作为DIV的背景图时随着DIV的宽度或高度自适应就OK了.网上也找过,但不 兼容IE或有bug,下面贴出本人亲测代码,兼容主流浏览器,包括F

Css问题 margin float 文档流 背景图底部充满

今天来整理一下做网页遇到的问题吧 1.插入背景图片并使图片居于div底部充满整个行. <style> background:url(xxx.jpg) no-repeat; background-position:bottom; background-size:100%; </style> 属性: background-position:背景位置属性用于设置背景图像的位置,这个属性只能应用于块级元素和替换元素.其中替换元素包括img.input.textarea.select. 语法

冒泡,setinterval,背景图的div绑定事件,匿名函数问题--工作中的思考

<1>会冒泡到兄弟元素么? $(function(){ $("#a").click(function(){alert("a")}) $("#b").click(function(){alert("b")}) $("#c1").click(function(){alert("c1")}) $("#c2").click(function(){alert(&qu

CSS属性:背景属性(图文详解)

本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. background系列属性 常见背景属性 CSS样式中,常见的背景属性有以下几种:(经常用到,要记住) background-color:#ff99ff; 设置元素的背景颜色. background-image:url(images/2.gif); 将图像设置为背景. background-repeat: no-repeat; 设置背景图片是否重复及如何重复,默认平铺

js多张图片合成一张图,canvas(海报图,将二维码和背景图合并) -----vue

思路:vue中图片合并 首先准备好要合并的背景图,和请求后得到的二维码, canvas画图,将两张背景图和一张二维码用canvas画出来, 将canvas再转为img 注意canvas和图片的清晰图和图片的尺寸位置 开始时canvas是隐藏的,两张背景图时显示的,当canvas画完后再转为img的时候,隐藏canvas和背景图,显示canvas转完的图片(也就是合并后的图片) 这个适配方式可能有些瑕疵,所以会加了很多设备的判断 代码: html      <div class="wap-p

CSS Sprites技术(将背景图整合到一张图中,再利用CSS背景图片定位到要显示的位置)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

div css鼠标悬停锚文本超链接文字背景颜色或图片变化

div css鼠标悬停锚文本超链接文字背景颜色或图片变化(体感音乐) css鼠标悬停超链接文字上时背景改变,鼠标经过文字链接时(悬停),文字的背景图片发生改变(出现背景图片或背景颜色). 鼠标经过悬停在超链接文字上时背景颜色或背景图片出现或改变教程篇.(体感音乐) 此DIV CSS布局技巧其实是对a标签做鼠标经过CSS样式.利用以下代码: a{...} 原始超链接默认样式设置a:hover{...}鼠标悬停经过时超链接锚文本CSS样式(扩展阅读:ie6 hover)一.链接文字无背景鼠标经过悬停