css3-11 如何改变背景图片的大小和位置
css3-11 如何改变背景图片的大小和位置
一、总结
一句话总结：css3相对css2本身就支持改变背景图片的大小和位置。
1、怎么设置背景不填充padding部分？
background-origin
3)content-box
#有效区域
18 background-origin:content-box;
2、如何改变背景图片的大小？
background-size属性
17 background-size:100%;
background-size:100% 100%;
3、背景如何使用多重图？
url可以累加
body
{
background-image:url(img_flwr.gif),url(img_tree.gif);
}
4、如何裁剪背景图片？
background-clip属性，这个方法的属性值和background-origin一样
background-clip: content-box;
5、background-origin和background-clip设置背景图的区别（都限定了背景图出现的位置）？
一个裁剪了背景图，一个背景图还是原图，只是 放的位置不同了，缩放比例不同而已
二、如何改变背景图片的大小和位置
1、相关知识
1.background-size
background-size:100%;
#背景图大小
2.background-origin
1)border-box
#边框区域
2)padding-box
#内边距区域
3)content-box
#有效区域
新的背景属性
| 顺序 | 描述 | CSS |
|---|---|---|
| background-clip | 规定背景的绘制区域。 | 3 |
| background-origin | 规定背景图片的定位区域。 | 3 |
| background-size | 规定背景图片的尺寸。 | 3 |
2、代码
背景图大小和位置
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
*{
font-family: 微软雅黑;
} div{
width:500px;
height:500px;
border:10px solid transparent;
padding:10px;
background:url('b.png') no-repeat;
background-size:100%;
background-origin:border-box;
}
</style>
</head>
<body>
<div>
<p>linux is very much!</p>
<p>linux is very much!</p>
<p>linux is very much!</p>
<p>linux is very much!</p>
<p>linux is very much!</p>
</div>
</body>
</html>
裁剪背景图
<style>
#example1 {
border: 10px dotted black;
padding:35px;
background: yellow;
} #example2 {
border: 10px dotted black;
padding:35px;
background: yellow;
background-clip: padding-box;
} #example3 {
border: 10px dotted black;
padding:35px;
background: yellow;
background-clip: content-box;
}
</style>
css3-11 如何改变背景图片的大小和位置的更多相关文章
- CSS3设置背景图片的大小
设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩. background-size 语法详解: 要在插入图片之后进行设置背景图片的大小 backgroun ...
- 一款基于jquery的下拉点击改变背景图片
今天给大家介绍一款基于jquery的下拉点击改变背景图片.单击右上角的图片,下拉显示可选择的背景图片,单击图片变为背景图.效果图下: 在线预览 源码下载 实现的代码. html代码: <a ...
- background-size 设置背景图片的大小
background-size 设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩. 语法: background-size: auto | <长度值 ...
- background-size （设置背景图片的大小）
设置背景图片的大小,以长度值或百分比显示(数值包括 长度length和百分比percentage),还可以通过cover和contain来对图片进行伸缩. 语法:background-size: au ...
- atitit.自适应设计悬浮图片的大小and 位置
atitit.自适应设计悬浮图片的大小and 位置 #--------最好使用relate定位.. 中间,图片的大小和位置走能相对table, 没有遮罩左的或者哈面儿文本的问题,要悬浮,使用top:- ...
- MFC中改变控件的大小和位置
用CWnd类的函数MoveWindow()或SetWindowPos()可以改变控件的大小和位置. void MoveWindow(int x,int y,int nWidth,int nHeight ...
- MFC中改变控件的大小和位置(zz)
用CWnd类的函数MoveWindow()或SetWindowPos()能够改变控件的大小和位置. void MoveWindow(int x,int y,int nWidth,int nHeight ...
- 3.css3中多个背景图片的用法
(background-clip裁剪,background-position位置,background-origin定位,background-repeat是否重复) <!DOCTYPE htm ...
- android 中ImageButton按下改变背景图片的效果
最近在做一个app的登陆界面,才发现原来认为很简单的UI效果,其实背后却蕴含的知识很多,积累一个算一个吧. 实现方法有两种:一种是添加代码,一种是配置xml文件. 方法一:代码添加 ImageButt ...
随机推荐
- python 中文文档地址总结
sqlalchemy: https://www.imooc.com/article/details/id/22343
- flask使用第三方云通讯平台时，出现{'172001':'网络错误'}解决方法
问题描述:flask使用第三方云通讯平台时,出现{'172001':'网络错误'} 解决方法: 在sms.py文件中添加如下代码 import ssl # 取消证书验证ssl._create_defa ...
- HBase-scan API 通过scan读取表中数据
直接贴代码啦 /** * * @param zkIp * @param zkPort * @param tablename * @param startRow 传null扫全表 * @param st ...
- 关于结构体COORD介绍
COORD是windows API中定义的一种结构,表示一个字符在控制台屏幕上的坐标.其定义为: typedef struct _COORD { SHORT X; // horizontal coor ...
- iTOP-4412开发板使用
使用环境:win7 旗舰64位,VMware11 使用使用板上提供的ubuntu12.04,用VMWARE直接打开虚拟机,因为之前开发epc9600开发板,所以虚拟机网络已经设置过,加载ubuntu1 ...
- JavaScript 进度条重复加载
<!DOCTYPE HTML> <html> <head> <meta charset ="utf-8"> <title> ...
- Django项目之Web端电商网站的实战开发（一）
说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 目录 一丶项目介绍 二丶电商项目开发流程 三丶项目需求 四丶项目架构概览 五丶项目数据库设计 六丶项目框架搭建 一丶项目介绍 产品 ...
- NIO专栏学习
http://blog.csdn.net/column/details/12993.html
- 6.在单机上实现ZooKeeper伪机群/伪集群部署
转自:https://blog.csdn.net/poechant/article/details/6633923
- Web应用开发（Servlet+html+Mysql）入门小示例
在安装好eclipse并配置完安装环境.安装好tomcat的前提下: 1.新建Dynamic Web Project,选择好运行的tomcat服务器版本等:2.在WebContent下: 新建fo ...