废话当然不说了。

直接上代码

<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. Island of Survival 概率

    #include <cstdio> #include <iostream> #include <cstring> #include <algorithm> ...

  2. 利用XPath解析带有xmlns的XML文件

    在.net中,编写读取xml 的程序中提示"未将对象引用设置到对象的实例",当时一看觉得有点奇怪.为什么在读取xml数据的时候也要实例化一个对象.google了才知道,xml文件中 ...

  3. 配置nginx1.7.8支持pathinfo模式

    vi nginx/conf/nginx.conf 1.修改正则 set $real_script_name $fastcgi_script_name; if ($fastcgi_script_name ...

  4. 国内国外最好的java开发论坛及站点 [转]

    国内: www.chinajavaworld.com -论坛人很多,高手也多,不过好像都在潜水    www.cn-java.com -也很不错,文章很好,但是就是商业性浓了点.    www.chi ...

  5. MDK —— configuration wizard

    学习RTX 的时候发现RTX的配置文件可以MDK的图形界面来配置,感觉这个非常好,直观.方便.健壮,可以避免程序员写入错误的数据.   参考: µVision User's Guide->Uti ...

  6. MongoDB在windows服务器安装部署及远程连接MongoDB

    (.\是表示在服务器的windows powershell下需要 表示信任此命令才会执行不然会报错,自己电脑上使用时可去掉.\) 在本地使用都不需要开启权限而在服务器上需要开启安全模式所以需要在原本的 ...

  7. 关于PowerDesigner

    1. PowerDesigner将所有的小写改为大写:Tools->Model Option->左侧菜单中“Naming conversion”->Column->Code – ...

  8. Quartz1.8.5例子(五)

    /* * Copyright 2005 - 2009 Terracotta, Inc. * * Licensed under the Apache License, Version 2.0 (the ...

  9. winfrom获得鼠标的坐标

    Point mouse = this.PointToScreen(Control.MousePosition);label1.Text = mouse.X.ToString() + ":&q ...

  10. MFC窗口分割以及各窗口间的通讯

    一个偶然的机会又重新接触了MFC窗口的分割,自己结合资料重新写了一个窗口分割的程序,现将具体流程跟大家分享一下: 1.我们先创建一个MFC单文档类的程序,具体分割方式先将单文档整个客户区分成两行一列, ...