css3 设置背景图片大小(缩略图形式缩小)
废话当然不说了。
直接上代码
<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 设置背景图片大小(缩略图形式缩小)的更多相关文章
- CSS3设置背景图片的大小
设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩. background-size 语法详解: 要在插入图片之后进行设置背景图片的大小 backgroun ...
- background-size 设置背景图片的大小
background-size 设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩. 语法: background-size: auto | <长度值 ...
- background-size (设置背景图片的大小)
设置背景图片的大小,以长度值或百分比显示(数值包括 长度length和百分比percentage),还可以通过cover和contain来对图片进行伸缩. 语法:background-size: au ...
- CSS3 background-image背景图片相关介绍
这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺.拉伸.偏移.设置大小等操作. 1. 背景图片样式分类 CSS中设置元素背景图片及其背景图片样式的属性主要以下几个: ...
- [Netbeans]为面板设置背景图片
与AndroidStudio等类似IDE不同,在Netbeans开发桌面程序时,不可以直接通过src=@drawable 等方法为窗口设置背景图片.这里介绍一种简便的方法: 1:首先,拖动一个面板到f ...
- qt 设置背景图片
博客出处:http://www.cppblog.com/qianqian/archive/2010/07/25/121238.htm 工作似乎走上正轨了,上周五的工作是做一个界面,用到QFrame和Q ...
- css网页中设置背景图片的方法详解
在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等 用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {">说明:参数取值和颜色属性一样 ...
- Qt 设置背景图片3种方法(三种方法:QPalette调色板,paintEvent,QSS)
方法1. setStylSheet{"QDialog{background-image:url()"}} //使用styleSheet 这种方法的好处是继承它的dialog都会自 ...
- img只显示图片一部分 或 css设置背景图片只显示图片指定区域
17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...
随机推荐
- CentOS 6下安装nodejs 0.9.0
确保安装了python,大部分安装失败都是由于python版本过低导致.安装之前,升级python版本,升级步骤 http://www.tomtalk.net/wiki/Python. [root@S ...
- Touch组件实现原理
Touch组件的实现主要解决了在pc端和移动端拖拽元素的功能. PC端: 依靠事件: mousedown,mousemove,mouseup的鼠标事件.过程: 1. mousedown事件中记录当前元 ...
- DataTable 无法转换的错误
目前基本上检索都已经离不开Linq了.所以最近在Linq的过程中出现了一些意外情况,特此记录下来. 先描述一下场景: 有一个查询的要求是这样的,检索出Status > 1 的数据.因为要根据其他 ...
- 学习Swift -- 协议(下)
协议(下) 在拓展中添加协议成员 通过扩展使得Dice类型遵循了一个新的协议,这和Dice类型在定义的时候声明为遵循TextRepresentable协议的效果相同.在扩展的时候,协议名称写在类型名之 ...
- PI数据库的使用-PI System Management Tools
1.PI连接管理器 2.标记搜索 3.当前值
- 如何得到UBUNTU源代码
http://www.pleaseguide.me/367/how-to-get-the-source-code-of-ubuntu 在按书作测试,有难点一一解决. Ubuntu's Source c ...
- 经典的单例模式c3p0来控制数据库连接池
package com.c3p0.datapools; //数据库连接池 单例模式 import java.sql.Connection; import java.sql.SQLException; ...
- 《深度探索c++对象模型》chapter1关于对象对象模型
在c++中,有2种class data member:static和nostatic,以及3钟class member function:static,nostatic和virtual.已知下面这个c ...
- tomcat 系统架构与设计模式 第一部分 系统架构工作原理 转
Tomcat 系统架构与设计模式,第 1 部分: 工作原理 许 令波, Java 开发工程师, 淘宝网 许令波,现就职于淘宝网,是一名 Java 开发工程师.对大型互联网架构设计颇感兴趣,并对一些开源 ...
- 修改uCOS_II以实现“优先级+时间片”联合调度
本文在uCOS II上增加时间片任务调度的的原理: 对设置为同优先级的任务使用时间片调度,不同优先级任务仍然使用uCOS II的优先级调度策略.在同优先级任务的时间片调度中,所有任务暂时时间片长度固定 ...