body 的背景图设置

第一种 :这种情况下背景图片可以缩放 但是不能完全等比缩放

background: url(imgs/1.jpg)no-repeat;

background-position:center 0;   背景图的定位原点,由于body高不确定

background-attachment:fixed;  背景图片保持固定,不会随页面滚动而滚动

第二种: 这种情况下的背景图会完全的等比缩放, 随着窗口大小改变

首先给html 设置 height:100%;

给body设置

background: url(imgs/1.jpg) no-repeat;

background-size: 100% 100%; 若background-size 值为cover, 此情况下是只要有一边碰到窗口边,就停止, 这种情况下 ,背景图不会等比缩放

同样道理,

body中的元素若想宽高100%,

第一种方式:

先给html设置height:100%; 再给该元素设置width:100%;height:100%;

第二种方式: 给width/height 设置100% 的同时,也要设置position:fixed;

页面若要用到input, 要去掉其默认的 outline 和border, 若使用默认的border,后面js修改时, 第一次交互,会出现微小的像素偏移,建议重置

<linkrel="shortcut icon" href="imgs/favicon.ico"/> 这一句放在<head>中,修改该html网页title中小图标

html中将文字纵向显

对文字对象宽度设置只能排下一个文字的宽度距离，让文字一行排不下两个文字使其文字自动换行，就形成了竖立排版需求

此时需要在该css中加上

word-wrap:break-word; word-break:normal;这个两句 可实现标点换行的,同时整体纵向显示

writing-mode：设置对象书写方向，有两个值，

1.lr-tb：从左向右，从上往下 ，

2. tb-rl：从上往下，从右向左

运行代码发现，IE显示正常，火狐、谷歌浏览器却不支持，所以不建议使用writing-mode属性

css 中的背景图片小技巧和存在的坑的更多相关文章

  1. Vue项目打包发布后CSS中的背景图片不显示

    相信有很多同学在学习vue的刚开始都遇到过项目打包发布后发现CSS中的背景图片不显示,具体如何解决只需要更改bind的配置即可 修改 build/utils.js 中的 generateLoaders ...

  2. css中background-image背景图片路径设置

    web项目中经常会用到background-image:url(),很多小伙伴不知道该怎么写需要的图片路径. 在此之前先要知道几个重要的东东: /  项目根目录         这个不用多说,就是程序 ...

  3. CSS中让背景图片居中且不平铺

    background:url(../images/logo.jpg) no-repeat center ;

  4. css中设置背景图片适应屏幕

    以body为例 body{ background: url(../img/jld.png) no-repeat center center fixed; -webkit-background-size ...

  5. css如何使背景图片水平居中

    CSS中定位背景图片的属性是:background-position,用法background-position 属性设置背景图像的起始位置. 你要水平居中可以: div{background-pos ...

  6. css网页中设置背景图片的方法详解

    在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等   用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {">说明:参数取值和颜色属性一样 ...

  7. css中background背景属性概

    css中background背景属性概 background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/background:url(背景图片路径)  no-repeat ...

  8. css中的背景、边框、补丁相关属性

    css中的背景.边框.补丁相关属性 关于背景涉及到背景颜色与背景图片 背景颜色background-color即可设定: 背景图片background-image即可设定: 但是背景图片还涉及到其他的 ...

  9. 【Python全栈-CSS】CSS实现网页背景图片自适应全屏

    CSS实现网页背景图片自适应全屏 功能:实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 以下是用CSS实现的方法: <html> <head> ...

随机推荐

  1. jQuery的工作原理

    jQuery是为了改变javascript的编码方式而设计的. jQuery本身并不是UI组件库或其他的一般AJAX类库. 那么它是如何实现它的声明的呢? 先看一段简短的使用流程: (1).查找(创建 ...

  2. Jax-ws 开发webService ,并使用spring注入service类

    由于使用myeclipse自动生成的Delegate,所以在使用service实现层的时候,默认创建的时候都是使用new的方法: 这样就导致每一次请求过来都得new一个新的:如果service有注入其 ...

  3. mvc 筛选器

    之前公司中,运用ActionFilterAttribute特性实现用户登录信息的验证,没事看了看,留下点东西备忘. 好的,瞅这玩意一眼就大概能猜到这货是干嘛的了吧,没错,action过滤器.其实就是A ...

  4. python——迭代器和生成器

    1.迭代器 迭代器是访问集合元素的一种方式.迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束.迭代器只能往前不会后退,不过这也没什么,因为人们很少在迭代途中往后退.另外,迭代器的一大优 ...

  5. Java AOP (1) compile time weaving 【Java 切面编程 (1) 编译期织入】

    According to wikipedia  aspect-oriented programming (AOP) is a programming paradigm that aims to inc ...

  6. scala练手之数字转汉字小工具

    输入数字,转换成汉字,在统计数据量时很好用,而输入数字转成大写汉字,可以用于填写收据报销单哦 下载链接 https://pan.baidu.com/s/1nv3Ci6l 效果图如下: 直接上代码 ob ...

  7. Web 版 powerdesigner (Canvas) 技术分享

    演示地址:http://www.netuml.com:8088  <canvas></canvas>是HTML5出现的新标签,像所有的dom对象一样它有自己本身的属性.方法和事 ...

  8. Saltstack自动化运维

    Saltstack三大功能 1,远程执行 2,配置管理(状态) 3,云管理 四种运行方式: Local         本地 Minion/Master C/S Syndic  代理模式 Salt S ...

  9. （坑）django test在多线程下的问题

    问题描述: 使用django自带的test做测试,尝试去数据库中取数据,主线程中没有问题,非主线程中取不到数据. 示例代码: class MyTestCase(TestCase): def setUp ...

  10. Python 基本数据类型_常用功能整理

    一.字符串 字符串 s ="axle" #去两端空格 s.split() #以什么开头 s.startswith("a") #查找子序列,"12&qu ...