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:
背景图片的较大边放大到目标大小结束
代码:
background属性
.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;
}
背景图片
页面效果:
背景图定位代码:
背景定位
.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;
}
关于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 ...
随机推荐
U3D笔记11:47 /11/30-15:15 /12/19
11:47 /11/30Before you can load a level you have to add it to the list of levels used in the gam ...
stapes文档翻译
1.引言 写一个Stapes 模型如下: 2.创建方法 这些方法用来帮助创建和扩展类或模块.这些术语在文档中可交换的. subclass Module.subclass([object]) st ...
cstring 的重载
#include #include using namespace std; +; class MyString { public ...
jenkins 设置权限后管理员登陆提示:Access Denied admin没有Overall/Read权限
jenkins 设置权限后,管理员登陆提示:Access Denied admin没有Overall/Read权限 处理办法: window下编辑 xml 配置文件:%userprofile%\. ...
dotnet Core 异步任务
使用线程池中线程的任务启动方式 线程池提供了一个后台线程的池,独自管理线程,按需增加或减少线程池中的线程数.线程池中的线程用于执行一些动作后仍然返回线程池中. using System; using ...
H5拖动火狐自动打开新标签
写在前面的话:
原因是为什么百度很多了我就不细说,本文章只说我自己的解决方法... 自定义数据里写个链接,如果火狐自动打开就跳到这个链接 这个页面就写一句话:关 ...
git小技巧--如何从其他分支merge个别文件或文件夹
在实际工作中,一个大型的项目或版本迭代可能不是一次上线,可能会分好几次上线,这时候就会涉及创建多个分支,进行分别开发. 创建分支 功能分为2个分支,分别为A.B. A上面有个列表页功能 B上面有个详情 ...
MYSQL中替换oracle中runum用法
一 . SELECT * FROM (SELECT A.*, rownum AS RN FROM (SELECT (@rownum := @rownum + 1) AS rownum, B.LL11, ...
[codecademy]fonts in css
Great job! You learned how to style an important aspect of the user experience: fonts! Let's review ...
爬虫--requeste
1.requeste模块,是我们Python对我们爬虫有好的一面,,其主要作用是用来模拟浏览器发起请求.功能强大,用法简洁高效.在爬虫领域中占据着半壁江山的地位.没有的话直接pip3install ...