css 中的背景图片小技巧和存在的坑
2018-06-24 01:26:40来源：未知 阅读 ()
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属性
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
上一篇：读书笔记《CSS权威指南》
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点，学前端，基础不好一切白费！ 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
