background-image 和 img
一:解决div里面的img图像宽度不变,高度不变! 超出div部分设置隐藏!
图片:1920x526
div容器: 1423x526
1. background-image:样式实现
img: 标签或者html组建实现
2.一般来说,如果是装饰性的图片就使用background-img,如果和文体内容很相关就使用img
3.加载过程:如果你用引入了一个很大的图片,那么在这个图片下载完成之前,img后的内容都不会显示。而如果用css来引入同样的图片,网页结构和内容加载完成之 后,才开始加载背景图片,不会影响你浏览网页内容。
4.谨记:background图片的显示:div容器必须设置高度哦!
二:background-image属性补漏
1.background-image:不同的背景图像和图像用逗号隔开,所有的图片中显示在最顶端的为第一张。
2.background-Origin: 定义背景图像的位置区域。
3.background-clip:背景图裁剪方式。
4.background-size:length|percentage|cover|contain; 可以设置负值的哦! 试试不就知道了!
问题:
a:背景图超出容器,那么只会显示图片的左上部分哦! 默认情况下,background-image放置在元素的左上角,并重复垂直和水平方向。
b: 设置背景图:容器必须设置高度哦!
c: background-size:100% 完全填充满父元素哦! background-size:cover也是哦!
background-size:contain ? 这显示?
三:再次完善哦!
1.background-color: rgba(4,4,4,0.7); 设定背景色的透明度哦! 不会影响到容器里的文字哦!
红+绿+蓝+Alpha透明的颜色 我们以后要实现半透明效果(无论是背景,边框,文字颜色等都可以用半透明实现了)
http://www.zhangxinxu.com/wordpress/2010/05/rgba%e9%a2%9c%e8%89%b2%e4%b8%8e%e5%85%bc%e5%ae%b9%e6%80%a7% e7%9a%84%e5%8d%8a%e9%80%8f%e6%98%8e%e8%83%8c%e6%99%af%e8%89%b2/
2.background-position:设置背景图像的起始位置。 (解决背景图大于容器)
background-size: length|percentage|cover|contain;
背景图无法撑开容器哦! 所以超出部分会被overflow:hidden!
background-position就是就是为了当图片大于容器的时候,显示图片的指定部分哦!
四:引申(你的突破点哦)
问题1: 当图片的大小超出容器的大小时候,用img标签合适吗? 为了实现图片的缩放,还是用background好点吧!
问题2: img做响应式好还是background-image做响应式好呢?
问题3: css中图片何时会撑破div容器呢? img会撑破容器的哦(当img的大小大于容器的大小)
理解4: 为什么美工要把图片做的非常的大呢? 因为是为了在高分屏上获得更好的展示。 在普通屏上图片设置为溢出隐藏(如果图片不关心显示部分); 但如果关心,则可以利用
响应式实现哦 ! 实现图片的缩放! 哦哦,理解美工的专业性!
background-image 和 img的更多相关文章
- css样式之background详解
background用法详解: 1.background-color 属性设置元素的背景颜色 可能的值 color_name 规定颜色值为颜色名称的背景颜色(比如 red) he ...
- css样式之background详解(格子效果)
background用法详解: 1.background-color 属性设置元素的背景颜色 可能的值 color_name 规定颜色值为颜色名称的背景颜色(比如 red) he ...
- CSS背景background、background-position使用详解
背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一.这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachm ...
- CSS 中关于background 属性功能
background 是 css中的核心属性,我们对他应该充分了解. background-image 定义背景图像 这个属性是我们用的最多的属性 设置背景图像有两个方式 background: ...
- 1 background(复合属性)与font(复合属性) 2 行内块的间距问题 3 行内元素的margin 4 清除浮动 5定位的元素的层级 6 Border-radius: 边框半径
1 background(复合属性)与font(复合属性): background: 颜色 图片的链接 是否平铺 背景位置 是否滚动.(可以随意调动或省略) Font: 粗度 字体风格 字体大小 ...
- Android什么时候进行View中Background的加载
对大多数Android的开发者来说,最经常的操作莫过于对界面进行布局,View中背景图片的加载是最经常做的.但是我们很少关注这个过程,这篇文章主要解析view中背景图片加载的流程.了解view中背景图 ...
- CSS中对图片(background)的一些设置心得总结
写网页的时候很多情况需要对图片进行操作,如何在不进行专业的美工裁切操作的情况下而让自己的素材度达到最大的满意度呢,这是一个问题,对于懒得开ps切图的我,通常会直接在网络上download一张图片,直接 ...
- PopupWindow 点击外部和返回键无法消失背后的真相(setBackgroundDrawable(Drawable background))
刚接手PopupWindow的时候,我们都可能觉得很简单,因为它确实很简单,不过运气不好的可能就会踩到一个坑: 点击PopupWindow最外层布局以及点击返回键PopupWindow不会消失 新手在 ...
- CSS背景background详解,background-position详解
背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一.这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachm ...
- css中background背景属性概
css中background背景属性概 background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/background:url(背景图片路径) no-repeat ...
随机推荐
- The Google Test and Development Environment (持续更新)
最近Google Testing Blog上开始连载The Google Test and Development Environment(Google的测试和开发环境),因为blogspot被墙,我 ...
- VS 代码Diff 之Beyone Compare
前提条件 机器已安装 beyone compared软件和 visual svn for vs 插件. 在VS中集成SVN,我推荐使用 visual svn扩展. visual svn 官网:http ...
- div根据内容改变大小并且左右居中
div{ display:inline-block; width:auto; } 这个div的父元素text-align:center;
- java io (一)
对于文件内容的操作主要分为两大类 分别是:字符流 字节流 其中,字符流有两个抽象类:Writer Reader 其对应子类FileWriter和FileReader可实现文件的读写操作 Buffe ...
- [No000046]为什么跳槽加薪会比内部调薪要高?
有网友在知乎提问: 最近在思考一个问题,为什么跳槽往往意味着加薪? 如果一个人确有价值,为什么在原来的公司没有在薪水上体现出来?如果没有价值,为什么跳槽以后就会加薪?还是可以单纯的解释为,应聘者和招聘 ...
- h5中websocket
ajax的数据传输是单向的,客户端和服务端没有连接-----客户端建立连接发送请求----服务器端沿着建立的连接返回相应----断开连接 websocket则是可以在客户端和服务器端进行双向的数据接收 ...
- HTML 学习笔记 CSS3(Animation)
CSS3动画: 通过CSS3 我们能够创建动画 这可以在许多网页中取代动画图片 Flash动画 以及JavaScript. CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 ...
- webstrom快捷键速查
编辑 Ctrl + Space 基本代码完成 (任何类. 方法或变量名称)Ctrl + Shift + Enter 完整的语句Ctrl + P (在方法调用参数) 内的参数信息Ctrl + Q 快速的 ...
- P3381 【模板】最小费用最大流
P3381 [模板]最小费用最大流 题目描述 如题,给出一个网络图,以及其源点和汇点,每条边已知其最大流量和单位流量费用,求出其网络最大流和在最大流情况下的最小费用. 输入输出格式 输入格式: 第一行 ...
- 2178 表达式运算Cuties
2178 表达式运算Cuties 时间限制: 1 s 空间限制: 32000 KB 题目等级 : 大师 Master 题解 题目描述 Description 给出一个表达式,其中运算 ...