css 背景(background)属性、背景图定位
background属性:
Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项:
(1)background-color 设置背景颜色
(2)background-image 设置背景图片地址
(3)background-repeat 设置背景图片如何重复平铺
(4)background-position 设置背景图片的位置
(5)background-attachment 设置背景图片是固定还是随着页面滚动条滚动
实际应用中,可以用background属性将上面所有的设置项放在一起,而且也建议这么做,这样做性能更高,而且兼容性更好,如:”background:#00ff00 url(bgimage.gif) no-repeat left center fixed”,其中#00ff00是设置background-color;url(bgimage.gif)是设置background-image;no-repeat是设置background-repeat;left center是设置background-position;fixed是设置background-attachment;各设置项用空格隔开,有的设置项也可以不写,它会使用默认值。
background-size使用:
--length:
固定的值,如:100px 100px
--percentage:
百分比,如:90% 90%
--cover:
背景图片的较小边放大到目标大小结束
--contain:
背景图片的较大边放大到目标大小结束
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>background属性</title>
<style type="text/css">
.box{
width:400px;
height:200px;
border:1px solid #000;
margin:50px auto 0;
/* 设置背景图片 */
background-image:url("images/头像2.png");
/* repeat-x:只平铺x轴方向 */
/*background-repeat:repeat-x; */
/* repeat-y:只平铺y轴方向 */
/*background-repeat:repeat-y;*/
/* no-repeat:只平铺一次 */
background-repeat:no-repeat;
/* repeat:默认值 平铺所有的 */
/*background-repeat:repeat;*/ /* 设置背景图片的位置,第一个参数表示水平方向、第二个参数表示垂直方向的位置
水平方向:left center right
垂直方向:top center bottom
*/
/*background-position:center center; /left:左右位置 top:上下位置 *!*/ /* background-position可以是方向词,也可以是数值 */
/*background-position:30px 10px;*/
/*background-position:-10px 20px;*/ /* 合并写法: */
background:url("images/头像2.png") -10px 10px no-repeat cyan;
}
</style>
</head>
<body>
<div class="box">
背景图片
</div> </body>
</html>
页面效果:
背景图定位代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景定位</title>
<style type="text/css">
.box{
width:200px;
height:200px;
border:2px solid black;
margin:50px auto 0; background-image:url("images/hellokity.jpg");
background-repeat:no-repeat;
background-position:-159px -491px;
}
</style>
</head>
<body>
<div class="box"></div> </body>
</html>
css 背景(background)属性、背景图定位的更多相关文章
- 关于html与css的标签及属性(text文本属性、背景background属性、表格标签table、列表、)
text文本属性1.颜色 colorcolor:red: 2.文本缩进text-indant属性值 num+px text-indant:10px:3.文本修饰 text-decoration属性值: ...
- CSS背景和CSS3背景background属性
css背景属性用于定义HTML元素的背景 背景属性既可以为单个的单元设置背景,也可以为整个页面设置背景,可以对上述二者的任意组合设置背景,段落.文字.不同状态的链接.图像.内容区域修改其背景样式.设置 ...
- CSS中background属性详解
CSS背景属性 background css 说明 background-image:url(图片的网址); 背景图 background: url( 图片的网址 ); 背景 background-c ...
- 深入学习css之background属性
css中允许应用纯色作为背景,也允许使用图片作为背景. background一共有8个对应的属性: 1.background-color:颜色值 用于设定背景的颜色 有3种定义颜色的形式, 1, 颜色 ...
- CSS之样式属性(背景固定、圆形头像、模态框)
CSS属性 一.宽和高 width属性可以为元素设置宽度. height属性可以为元素设置高度. 块级标签才能设置宽度,内联标签的宽度由内容来决定. div {width: 1000px;backgr ...
- CSS之background属性
css背景是个很有意思的东西,可设置 背景色:background-color 背景图:backgoround-image 背景图显示相对位置:background-position,正数图片往右下移 ...
- CSS背景background、background-position使用详解
背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一.这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachm ...
- CSS背景background详解,background-position详解
背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一.这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachm ...
- css常用样式背景background如何使用
css背景background属性常用于定义HTML的背景,background简写属性作用是将背景属性设置在一个声明中,background背景属性常见为以下这些:.background-color ...
随机推荐
- PR视频剪辑
PR视频剪辑 新手问题1: 将素材导入到Adobe Premiere Pro CC后为什么无法拖入到时间轴上 解决办法:没有建立有序列所致,CC不会一开始就让你新建序列,图中间处写的好清楚“无序列”. ...
- ZooKeeper-客户端命令 zkCli
执行 bin/zkCli 文件进入客户端 查看帮助 help ZooKeeper -server host:port cmd args stat path [watch] set path data ...
- 第十五节:深入理解async和await的作用及各种适用场景和用法
一. 同步VS异步 1. 同步 VS 异步 VS 多线程 同步方法:调用时需要等待返回结果,才可以继续往下执行业务 异步方法:调用时无须等待返回结果,可以继续往下执行业务 开启新线程:在主线程之外 ...
- ArcGis Classic COM Add-Ins插件开发的一般流程 C#
COM add-ins是我对这种开发方式的称呼,Esri的官方文档里称其为“Extending ArcObject”或者“Classic COM extensibility”,Esri所称的addin ...
- 修改WEB项目的发布名称
1.在要修改的项目上单击右键选择properties,修改web选项中的Web Context-root中的发布名称即可,但需要注意的是修改发布名称后需要将项目从服务器中先移除后再重新添加.
- ssh远程登陆脚本(带跳板机)
mac自带的终端不太好用,被推荐了一个iterm2的终端替代工具,确实比自带的终端好用不少.下面记录下通过脚本一键远程登录的过程: 下载地址:http://m4.pc6.com/xuh3/iTerm2 ...
- 第29月第2天 charles
1. https://www.jianshu.com/p/55a8c84e0f24
- ve2.0 v-for循环报错的解决方案
<li v-for="(item,index) in mokeData" class="page" :key="index"> ...
- C++入门篇一
双冒号(::)的作用:作用域运算符,全局作用域 void LOL::game1(){//在LOL命名空间下面的game1 cout << "LOL游戏开始" <& ...
- Git使用九:合并和删除分支
实际开发中的分支 目前的快照情况:git log --decorate --all --oneline --graph 可以看到,目前HEAD是指向的master分支 合并分支:git merge 分 ...