废话当然不说了。

直接上代码

<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. CentOS 6下安装nodejs 0.9.0

    确保安装了python,大部分安装失败都是由于python版本过低导致.安装之前,升级python版本,升级步骤 http://www.tomtalk.net/wiki/Python. [root@S ...

  2. Touch组件实现原理

    Touch组件的实现主要解决了在pc端和移动端拖拽元素的功能. PC端: 依靠事件: mousedown,mousemove,mouseup的鼠标事件.过程: 1. mousedown事件中记录当前元 ...

  3. DataTable 无法转换的错误

    目前基本上检索都已经离不开Linq了.所以最近在Linq的过程中出现了一些意外情况,特此记录下来. 先描述一下场景: 有一个查询的要求是这样的,检索出Status > 1 的数据.因为要根据其他 ...

  4. 学习Swift -- 协议(下)

    协议(下) 在拓展中添加协议成员 通过扩展使得Dice类型遵循了一个新的协议,这和Dice类型在定义的时候声明为遵循TextRepresentable协议的效果相同.在扩展的时候,协议名称写在类型名之 ...

  5. PI数据库的使用-PI System Management Tools

    1.PI连接管理器 2.标记搜索 3.当前值

  6. 如何得到UBUNTU源代码

    http://www.pleaseguide.me/367/how-to-get-the-source-code-of-ubuntu 在按书作测试,有难点一一解决. Ubuntu's Source c ...

  7. 经典的单例模式c3p0来控制数据库连接池

    package com.c3p0.datapools; //数据库连接池  单例模式 import java.sql.Connection; import java.sql.SQLException; ...

  8. 《深度探索c++对象模型》chapter1关于对象对象模型

    在c++中,有2种class data member:static和nostatic,以及3钟class member function:static,nostatic和virtual.已知下面这个c ...

  9. tomcat 系统架构与设计模式 第一部分 系统架构工作原理 转

    Tomcat 系统架构与设计模式,第 1 部分: 工作原理 许 令波, Java 开发工程师, 淘宝网 许令波,现就职于淘宝网,是一名 Java 开发工程师.对大型互联网架构设计颇感兴趣,并对一些开源 ...

  10. 修改uCOS_II以实现“优先级+时间片”联合调度

    本文在uCOS II上增加时间片任务调度的的原理: 对设置为同优先级的任务使用时间片调度,不同优先级任务仍然使用uCOS II的优先级调度策略.在同优先级任务的时间片调度中,所有任务暂时时间片长度固定 ...