废话当然不说了。

直接上代码

<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. [转] 属性选择器.mark

    CSS 2 引入了属性选择器. 属性选择器可以根据元素的属性及属性值来选择元素. 简单属性选择 如果希望选择有某个属性的元素,而不论属性值是什么,可以使用简单属性选择器. 例子 1 如果您希望把包含标 ...

  2. Jquery常用功能

    jQuery 1.4给开发者带来了很多值得兴奋的新特性,同时使用jQuery的人也越来越多,为了方便大家对jQuery的使用,下面列出了一些jQuery使用技巧.比如有禁止右键点击.隐藏搜索文本框文字 ...

  3. .Net C/S系统开发框架(楚楚原创)

    C/S系统开发框架-企业版 V4.0 (Enterprise Edition) 简介: http://www.csframework.com/cs-framework-4.0.htm 视频下载: 百度 ...

  4. 【转】深入 char * ,char ** ,char a[ ] ,char *a[] 内核

    原文出处:http://blog.csdn.net/daiyutage/article/details/8604720    C语言中由于指针的灵活性,导致指针能代替数组使用,或者混合使用,这些导致了 ...

  5. Linux Curses编程实现贪吃蛇

    curses库 简单而言,提供UNIX中多种终端 操作光标和显示字符 的接口.我们常见的vi就是使用curses实现的.现在一般都用ncurses库. Linux下curses函数库    Linux ...

  6. Bag of Words/Bag of Features的Matlab源码发布

    2010年11月19日 ⁄ 技术, 科研 ⁄ 共 1296字 ⁄ 评论数 26 ⁄ 被围观 4,150 阅读+ 由于自己以前发过一篇文章讲bow特征的matlab代码的优化的<Bag-Of-Wo ...

  7. nutch 异常集锦

    异常:Exception in thread "main" java.io.IOException: Failed to set permissions of path: \tmp ...

  8. Android应用自杀和干掉其它进程

    // 自杀(这种方式只能杀掉自己的进程,其它进程无法杀死) int pid = Process.myPid(); android.os.Process.killProcess(pid); // 或者 ...

  9. eclipse 启动tomcat报Spring错误 Error creating bean with name 'serviceOrderBiz': Injection of autowired dependencies failed

    启动tomcat报异常,提示Sring无法创建serviceOrderBiz(第一行红字),继续看是因为有一个自动注入的字段无法注入ModuleInterfaceBiz(第二行红字),检查servic ...

  10. bzoj 1051: [HAOI2006]受欢迎的牛 tarjan缩点

    1051: [HAOI2006]受欢迎的牛 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 2092  Solved: 1096[Submit][Sta ...