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. Java设置Excel单元格式

    XSSFWorkbook wb = new XSSFWorkbook(); CellStyle style = wb.createCellStyle(); style.setBorderRight(C ...

  2. C语言学习第四章

    今天学习C语言循环结构,为什么要用循环呢?因为有时候我们对一堆的数字进行重复的处理的时候要重复的编写一些相同或者差不多的代码,让程序显得很臃肿,而且写着也麻烦,如果用循环来写的话能简化很多,出错的话也 ...

  3. 【知识学习】如何寻找真实IP

    1.多地点ping查询IP,如果都一样可能没有使用cdn,如果有cdn,尝试海外地点ping查询IP 2.ping一下没有WWW的域名,可能存在真实IP.比如www.baidu.com设置了cdn,那 ...

  4. Java计算两个程序运行时间

    一.获取系统当前时间 long startTime = System.currentTimeMillis(); //获取开始时间 doSomething(); //测试的代码段 long endTim ...

  5. stl_config.h基本宏

    四.宏: (其实呢, 我们所有的宏都包含在了 "stl_config.h"头文件中.) //这些宏是怎么判断是否需要定义:是否有指定的宏,还有一些特定的编译器也可能支持. 4.1. ...

  6. 磁盘IO：缓存IO与直接IO

    文件系统IO分为DirectIO和BufferIO,其中BufferIO也叫Normal IO. 1. 缓存IO 缓存I/O又被称作标准I/O,大多数文件系统的默认I/O操作都是缓存I/O.在Linu ...

  7. laytpl--前端数据绑定

    发现一枚前端数据绑定导弹:laytpl,官网:http://www.layui.com/laytpl/ 为了不用angularJS等较为重量级的,和繁琐的配置,所以就用了laytpl,可以配合JQ使用 ...

  8. 优化单页面开发环境：webpack与react的运行时打包与热更新

    前面两篇文章介绍初步搭建单页面应用的开发环境: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-router实现单页面应用路由 这 ...

  9. nodejs环境的搭建（linux环境centos6.5）

    更新yum # yum update 新建用户 # adduser user设置密码 # passwd user 允许用户通过ssl远程访问 # vi /etc/ssh/sshd_config 在文末 ...

  10. 如何在Linux实现自动运行程序

    1.开机启动时 Linux加载后, 它将初始化硬件和设备驱动, 然后运行第一个进程init. init根据配置文件继续引导过程,启动其它进程.通常情况下,修改放置在 /etc/rc或 /etc/rc. ...