废话当然不说了。

直接上代码

<style>
#mycon
{
background:url('Tpl/1.jpg');
background-size:400px 400px;
background-repeat:no-repeat;
border-radius: 4px;
border: 1px solid #ccc;
width: 400px;
height: 400px;
} </style>
<div id="mycon">
原来背景图大小:970*630
这里才是战场,以缩略图的形式来将背景图设置
</div>
background-size:400px 400px;

后面是设置缩略图宽和高。

效果如图:

css3 设置背景图片大小(缩略图形式缩小)的更多相关文章

  1. CSS3设置背景图片的大小

    设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩. background-size 语法详解: 要在插入图片之后进行设置背景图片的大小 backgroun ...

  2. background-size 设置背景图片的大小

    background-size 设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩. 语法: background-size: auto | <长度值 ...

  3. background-size (设置背景图片的大小)

    设置背景图片的大小,以长度值或百分比显示(数值包括 长度length和百分比percentage),还可以通过cover和contain来对图片进行伸缩. 语法:background-size: au ...

  4. CSS3 background-image背景图片相关介绍

    这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺.拉伸.偏移.设置大小等操作. 1. 背景图片样式分类 CSS中设置元素背景图片及其背景图片样式的属性主要以下几个: ...

  5. [Netbeans]为面板设置背景图片

    与AndroidStudio等类似IDE不同,在Netbeans开发桌面程序时,不可以直接通过src=@drawable 等方法为窗口设置背景图片.这里介绍一种简便的方法: 1:首先,拖动一个面板到f ...

  6. qt 设置背景图片

    博客出处:http://www.cppblog.com/qianqian/archive/2010/07/25/121238.htm 工作似乎走上正轨了,上周五的工作是做一个界面,用到QFrame和Q ...

  7. css网页中设置背景图片的方法详解

    在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等   用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {">说明:参数取值和颜色属性一样 ...

  8. Qt 设置背景图片3种方法(三种方法:QPalette调色板,paintEvent,QSS)

    方法1. setStylSheet{"QDialog{background-image:url()"}}  //使用styleSheet 这种方法的好处是继承它的dialog都会自 ...

  9. img只显示图片一部分 或 css设置背景图片只显示图片指定区域

    17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...

随机推荐

  1. python for list generate content

    content = [ii for ii in range(50)] This can generate a list content

  2. 2016022605 - redis订阅发布

    Redis的实现消息队列功能,消息发布者发送的消息,消息接收者接收发布者的消息.由该消息传送的链路被称为通道.在Redis客户端可以订阅任何数目的通道. 案例:给出一个客户端订阅一个通道名为redis ...

  3. js将数字转换成大写的人民币表达式

    function changeNumMoneyToChinese(money) { var cnNums = new Array("零", "壹", " ...

  4. 关于执行ST_Geometry的st_centroid函数时报ORA-28579错误的问题

    环境 SDE版本:10./10.2/10.2.1/10.2.2 Oracle版本:11g R2 11.2.0.1 Windows版本:Windows Server 2008 R2 问题描述及原因 以全 ...

  5. Reporting Services 钻取报表、子报表

    一.钻取报表 1.概念 钻取报表是指用户通过单击其他报表中的链接打开的报表.钻取报表通常包含某原始汇总报表中所包含的某项的详细信息. 例如,在此图中,销售额汇总报表列出了销售订单和总额.当用户单击该汇 ...

  6. Delphi的Owner与Parent可以不一致,而且Owner不是必须存在(一共7个问题) good

    问题1:Owner与Parent不一致:新建一个Form,上面放一个Button1,一个Panel1,然后在Panel1上再放一个Button2,测试结果:procedure TForm1.Butto ...

  7. 集成activiti-modeler 到 自己的业务系统

    本文目的: 将activit 5.12.1 的 modeler 流程设计器 集成到自己的工程中去 解决问题: 1. 复制相关资源文件到自己的工程中 2. 解决modeler的路径访问问题,迁移到非系统 ...

  8. ViewHolder VS HolderView ?

    ViewHolder 模式在 Android 中大家应该都不陌生了,特别是在 ListView 中通过 ViewHolder 来减少 findViewById 的调用和 类型的转换. 而 Holder ...

  9. 5.JSON

    AJAX传递复杂数据如果自己进行格式定义的话会经历组装.解析的过程,因此AJAX中有一个事实上的数据传输标准JSON. JSON将复杂对象序列化为一个字符串,在浏览器端再将字符串反序列化为JavaSc ...

  10. leetcode面试准备:Decode Ways

    1 题目 A message containing letters from A-Z is being encoded to numbers using the following mapping: ...