css中背景的应用
浏览器默认的字体大小是 font-size:16px; 谷歌最小的是10px 其他浏览器是12px
通配符选择器 * “*”的意思是代表所有的标签
回到正题
background 背景
他的几个属性 背景颜色 background-color:red; (IE9以下给body设置background-color:不起作用需要用到bgcolor)
背景图片 background-image:url("路径“);
图片平铺 1.平铺 (浏览器默认)
2.不平埔 background-repeat:no-repeat; 3.平铺一整张背景 background-size: 100% 100; 横向x 纵向y
4.平铺整行 background-repeat:repeat-x;
5.平铺整列 background-repeat:repeat-y;
背景位置 background-position (注意背景位置也叫坐标轴位置 : 向右为正 向下为正
background-position:100px 100px; 意思是向右100像素 向下100像素 (具体数字)
位置值种类 具体的数字 百分比 或英文单词
background-position: 50% 50%; 向右百分之五十 向下百分之五十
background-position:top left; 意思是向上 向左 top left right bottom center
上 左 右 底部 中间
也可以进行简写 background:red url("路径") no-repeat 100px 100px;
颜色 图片 平铺 位置
注意不是所有图片都可以 如 图片大小就不行
边框
边框粗细 border-width:2px; 边框大小2像素
边框颜色 border-color:blue;
边框样式 border-style:solid; (实线) bashed(虚线)
边框简写 border:blue 1px dashed; 第三个必须是样式
边框圆角 border-radius: 50% 50%; 这是个圆形 小于或大于百分之五十 会有直线 变成圆角矩形
(后面的值必须是百分比)
css中背景的应用的更多相关文章
- CSS中背景图片定位方法
转自:http://www.ruanyifeng.com/blog/2008/05/css_background_image_positioning.html 作者: 阮一峰 日期: 2008年5月 ...
- CSS中背景图片的background-position中的left top到底是相对于谁的?
在学习的时候遇到了如下问题: CSS中背景图片的background-position中的left top到底是相对于谁的,content-box?padding-box?border-box? ba ...
- (转)HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法
http://blog.csdn.net/oscar92420aaa/article/details/51304067 CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中 ...
- HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法
CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:bac ...
- CSS 中背景图片定位方法
三种: 关键字:background-position: top left; 像素:background-position: 0px 0px; 百分比:background-position: 0% ...
- css中背景 字体 文体属性练习
@charset "utf-8"; body{ background-color:#332244;/*//背景颜色*/ background-image:("../kk. ...
- webpack中,css中打包背景图,路径报错
css-loader: //打包样式中背景图 { test: /\.(png|jpg)$/, loader: "url-loader?limit=8192&name=images/[ ...
- 用extract-text-webpack-plugin提取出来的css文件中背景图片url的不正确的问题
在一个main.js中require一个scss文件,scss文件中用了背景图片,图片url是用的相对路径,用extract-text-webpack-plugin插件提取出的css文件背景图片路径不 ...
- css中background背景属性概
css中background背景属性概 background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/background:url(背景图片路径) no-repeat ...
随机推荐
- 02 http,servlet,servletconfig,HttpServletRequest ,HttpServletResponse
Http协议 协议:双方在交互.通讯的时候, 遵守的一种规范.规则.http协议:针对网络上的客户端 与 服务器端在执行http请求的时候,遵守的一种规范. 其实就是规定了客户端在访问服务器端的时候, ...
- hdu2204 Eddy's爱好 打表+容斥原理
Ignatius 喜欢收集蝴蝶标本和邮票,但是Eddy的爱好很特别,他对数字比较感兴趣,他曾经一度沉迷于素数,而现在他对于一些新的特殊数比较有兴趣.这些特殊数是这样的:这些数都能表示成M^K,M和K是 ...
- Java中的继承抽象类和接口
一.总结 1.使用extends关键字继承,eg: class Student extends Persion { ...}; 2.Java编程规范中类的首字母大写,方法的首字母小写单词首字母代谢,e ...
- HBase的几个实示例
1 开发环境 在进行Hbase开发前,需要安装JDK.Hadoop和Hbase,选择一款合适的开发IDE,具体安装方法就不介绍了,我的开发环境: 操作系统:Ubuntu Java版本:jdk1.8 H ...
- Unity 资源的优化管理 学习
- 【转】ImageView.ScaleType属性
原文网址:https://blog.csdn.net/Buaaroid/article/details/49360779 ImageView的Scaletype决定了图片在View上显示时的样子,如进 ...
- 启用 webpack 的模块热替换特性
启用 webpack 的模块热替换特性: module.exports = { //... devServer: { hot: true } } 注意,必须有 webpack.HotModuleRep ...
- taro 学习资料
taro 学习资料 学习资料 网址 github https://github.com/NervJS/taro taro 官方文档 https://nervjs.github.io/taro/docs ...
- TP5模型belongsTo和hasOne的区别
在使用tp5模型的ORM的时候出现belongsTo和hasOne都有表示一对一的关系,但是二者并不相同.以下举例说明两者的区别: 首先有user表 字段 id name password字段 然后有 ...
- npm是什么
npm简介 维基百科中npm定义 npm完全用JavaScript写成,最初由艾萨克·施吕特(Isaac Z. Schlueter)开发. 艾萨克表示自己意识到"模块管理很糟糕"的 ...