使用CSS设置背景图片,图片比较大,完全显示在一个DIV中
做的时候想要边框为比较好看的样式,需要UI切图并且放在div中,看起来会好看点
像这样的,我随便挑选了一个,UI帮我切图出来
需要把这个图片填到相应的div里面,但是很显然碰到一个问题,图片太大,而且放进去以后还不是响应式的
那么解决问题的就来了:
background:url(1.jpg);
-webkit-background-size: 100px 60px;
这样还不是响应式应该怎么办呢
IMG加载的图片width设置为100%,高度会按照width的值自动等比率缩放
背景图片用background-size 属性来控制缩放
background:#00ff00 url(img.jpg) no-repeat;
我当时写的是
background-size:60% 80%;
-moz-background-size:60% 80%;
-webkit-background-size:60% 80%;
-o-background-size:60% 80%;
-webkit-background-size:100% 100%; 就完成相要的效果了
再放上相关的
响应式图像
<img src="..." class="img-responsive" alt="响应式图像">
通过添加 img-responsive class 可以让 Bootstrap 3 中的图像对响应式布局的支持更友好。
接下来让我们看下这个 class 包含了哪些 css 属性。
在下面的代码中,可以看到img-responsive class 为图像赋予了 max-width: 100%; 和 height: auto; 属性,可以让图像按比例缩放,不超过其父元素的尺寸。
.img-responsive {
display: inline-block;
height: auto;
max-width: 100%;
}
这表明相关的图像呈现为 inline-block。当您把元素的 display 属性设置为 inline-block,元素相对于它周围的内容以内联形式呈现,但与内联不同的是,这种情况下我们可以设置宽度和高度。
设置 height:auto,相关元素的高度取决于浏览器。
设置 max-width 为 100% 会重写任何通过 width 属性指定的宽度。这让图片对响应式布局的支持更友好。
使用CSS设置背景图片,图片比较大,完全显示在一个DIV中的更多相关文章
- img只显示图片一部分 或 css设置背景图片只显示图片指定区域
17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...
- css 设置背景图片模糊,内容不模糊
需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示. 原始代码: <!DOCTYPE html> <html lang=" ...
- CSS设置标签、图片放大、缩小、旋转、移动(tranform)
CSS设置标签.图片放大.缩小.旋转.移动(tranform) 1.缩小和放大属性(scale) 格式:tranform:缩小类型(数值): 注意:缩小和放大都是 scale : 其中的值(0~1)代 ...
- css设置背景固定不滚动效果的示例
css设置背景固定不滚动效果的示例 背景固定不滚动各位看到最多的无非就是QQ空间了,我们在很多的空间都可以看到内容滚动而北京图片不滚动了,下文整理了几个关于背景固定不滚动css代码. 一.css设置背 ...
- Android布局自定义Shap圆形ImageView,可以单独设置背景与图片
一.图片预览: 一.实现功能: 需求要实现布局中为圆形图片,图片背景与图标分开且合并到一个ImageView. 二.具体实现: XML中布局中定义ImageView, ...
- CSS 设置背景透明度,不影响子元素
由于 opacity 属性能被子元素继承,使用它设置父元素背景透明度时也会影响子元素. 解决方法: 1> 使用 RGBA Example .classname { /* RGBa, 透明度0.6 ...
- CSS——设置背景
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 解决css设置背景透明,文字不透明
设置元素的透明度: -moz-opacity:0.8; /*在Firefox中设置元素透明度 filter: alpha(opacity=80); /*ie使用滤镜设置透明 但是当我们对一个标 ...
- css设置超出部分文档隐藏(在table标签中不好使解决方案在下)
css设置: .text-over{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;cursor: pointer} div设 ...
随机推荐
- hadoop学习笔记以及遇到的坑整理(长期更新)
1.要看官方文档 http://hadoop.apache.org/docs/current/ 2.start-dfs.sh时提示rcmd: socket: Permission denied 解决方 ...
- Windows 设置定时任务
cmd 运行 control 命令打开控制面板,找到 管理工具 -> 任务计划程序 一.添加定时任务 创建任务 基本信息 触发器,这里设置开机启动 操作,这里执行一个程序.若为脚本,注意起始于路 ...
- jdk git maven Jenkins的配置
前言 搭建Jenkins的笔记. JDK 1. jdk 下载地址 https://www.oracle.com/technetwork/java/javase/downloads/jdk8-down ...
- JS遍历OCX方法
/----查看OCX组件的属性 <html> <head> <title>OCX</title> <meta http-equiv="C ...
- -moz-box-shadow
css的box-shadow是用来添加边框阴影效果的. 属性值详解: 1.inset可选值,默认阴影在盒子外使用inset后,阴影在盒子内,即使指定边框或者透明边框,阴影依然存在. 2.<off ...
- 在发布ASP.NET网站的时候,出现state server错误
错误信息如下: 在发布ASP.NET网站的时候,出现state server错误: Server Error in '/' Application. ------------------------- ...
- 阶段3 3.SpringMVC·_05.文件上传_3 文件上传之Springmvc方式上传原理分析
需要配置文件解析器这个对象 id配置时候必须叫做mutipartResolver 最终
- AIxoder插件安装及使用
参考:https://www.aixcoder.com/#/Download 右边有快捷导航,查看对应需要的问题 1.下载AIxcoder 2.安装并注册打开 3.给IDE安装 4.验证是否安装成 ...
- promise 实现红绿灯
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Python:Base4(map,reduce,filter,自定义排序函数(sorted),返回函数,闭包,匿名函数(lambda) )
1.python把函数作为参数: 在2.1小节中,我们讲了高阶函数的概念,并编写了一个简单的高阶函数: def add(x, y, f): return f(x) + f(y) 如果传入abs作为参数 ...