css 中的背景图片小技巧和存在的坑

时间 2019-11-06

标签 css 背景图片技巧存在栏目 CSS 繁體版

原文原文链接

body 的背景图设置 css

第一种 :这种状况下背景图片能够缩放可是不能彻底等比缩放html

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

background-position:center 0; 背景图的定位原点,因为body高不肯定网站

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

第二种: 这种状况下的背景图会彻底的等比缩放, 随着窗口大小改变spa

首先给html 设置 height:100%;orm

给body设置 htm

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属性