CSS样式:background-position word-wrap是控制换行的。

一、background-position定位背景图片

1、可以通过背景定位属性来定义背景图片的位置：background-position,使用背景定位的属性值有下面几种,如果不使用,默认位置是从页面左上角0位置开始：

（1）background-position:＜percentage＞使用百分点定位,0% 0%是指图片左上角与页面左上角对齐；如果是100% 100%，则表示图片右下角与页面右下角对齐。两个百分数用空格分开。

<html>
<head>
<style type="text/css">
body
{
background-image: url('/i/eg_bg_03.gif');
background-repeat: no-repeat;
background-attachment:fixed; //将背景图片固定
background-position: 37% 20%;
}
</style>
</head>

<body>
<p><b>注释：</b>为了在 Mozilla 中实现此效果，background-attachment 属性必须设置为 "fixed"。</p>
</body>
</html>

（2）background-position＜length＞使用长度单位，如2cm、5cm，表示图片距左2cm，距上5cm，两个数据用空格分开:

（3）下面是一些等式

top left， left top 等价于 0％ 0％.
top， top center， center top 等价于 50％ 0％.
right top， top right 等价于 100％ 0％.
left， left center， center left 等价于 0％ 50％.
center， center center 等价于 50％ 50％.
right， right center， center right 等价于 100％ 50％.
bottom left， left bottom 等价于 0％ 100％.
bottom， bottom center， center bottom 等价于 50％ 100％.
bottom right， right bottom 等价于 100％ 100％.

批注：必然记住这是设置靠山时的地位。
left/right/center 以左为准、以右为准、阁下居中
top/bottom/center 以上为准、以下为准、高低居中
同理：
0％ 100％以左为准、以右为准
0％ 100％以上为准、以下为准
若是只指定一个值，则默认为阁下。高低应用默认值，即50％。

background-attachment -- 定义靠山随迁移转变轴的移动体式格式
取值: scroll | fixed | inherit
scroll: 跟着页面的迁移转变轴靠山将移动
fixed: 跟着页面的迁移转变轴靠山不会移动

二、CSS切割术的手术刀Background-Position

切割图片的方法

background:transparent url('http://images.cnblogs.com/cnblogs_com/lichang1987/daohang.png') no-repeat scroll -49px 0px;

如果水平（X）为正数、垂直（Y）为负数，表示以图片的右上角为坐标，移动各个位移，如 8 -8 (以右上角，向右移8PX 向上移8px);

如果水平（X）为负数、垂直（Y）为负数，表示以图片的左上角为坐标，移动各个位移，如 -8 -8 (以左上角，向左移8PX 向上移8px);

如果水平（X）为正数、垂直（Y）为正数，表示以图片的右下角为坐标，移动各个位移，如 8 8 (以右下角，向右移8PX 向上移8px);

如果水平（X）为负数、垂直（Y）为正数，表示以图片的左下角为坐标，移动各个位移，如 8 8 (以左下角，向左移8PX 向上移8px);

三、background-position定位背景图片有时会偏差，有另外一种精确定位图片的方法

（1）<div style="background:url(1.jpg) 100px 5px no-repeat;"
我一般都直接这样写的，方便　意思是　离区块左100px　顶　5px　用于精确定位（2）legend style="background: url(../Images/PageImg/icon99.jpg) no-repeat 5px 50%;

四.word-wrap是控制换行的。 　　使用break-word时，是将强制换行。中文没有任何问题，英文语句也没问题。但是对于长串的英文，就不起作用。 　　break-word是控制是否断词的。 　　normal是默认情况，英文单词不被拆开。 　　break-all，是断开单词。在单词到边界时，下个字母自动到下一行。主要解决了长串英文的问题。 　　keep-all，是指Chinese, Japanese, and Korean不断词。即只用此时，不用word-wrap，中文就不会换行了。（英文语句正常。） 

　　ie下： 　　使用word-wrap:break-word;所有的都正常。 

　　ff下： 　　如这2个都不用的话，中文不会出任何问题。英文语句也不会出问题。但是，长串英文会出问题。 　　为了解决长串英文，一般用word-wrap:break-word;word-break:break-all;。但是，此方式会导致，普通的英文语句中的单词会被断开（ie下也是）。 　　目前主要的问题存在于 长串英文 和 英文单词被断开。其实长串英文就是一个比较长的单词而

转载于:https://www.cnblogs.com/lykbk/archive/2012/06/28/background-position.html

CSS样式:background-position word-wrap是控制换行的。相关推荐

js+html2canvas实现网页放大镜效果：放大镜图片使用css样式background背景图，鼠标移动使用样式background-position动态设置
实现效果: 鼠标移动到需要放大的网页上时,鼠标静止不动500毫秒后,一个长方形的放大镜框显示,放大镜中显示当前区域2.2倍的效果,并且这时候鼠标移动放大的区域也跟着变化.放大镜限制:放大 ...
CSS样式：position: absolute
使用position: absolute 老喜欢用margin-left来移动元素 margin-left在浏览器上兼容有问题,ie不会让元素自动居中,出现如果margin-left:40%:在非ie ...
CSS样式：2、超出隐藏控制
2019独角兽企业重金招聘Python工程师标准>>> overflow: hidden; 如果div a 包含div b,但是div b太大了,所以只需要,设定div a 的高度和 ...
css的background
背景属性--background是css中的核心属性.你应该对它有充分的了解.这篇文章详细讨论了background的所有相关属性,甚至包括background-p_w_upload,还为我们介绍了它 ...
前端JavaScript DOM BOM 自学复盘 D1（DOM-获取DOM元素、修改HTML标签/表单/css样式属性、定时器-间歇函数）
内容概要 1. Web API 基本认知 1.1. 作用和分类 1.2. 什么是DOM 1.3. DOM作用 1.4 DOM树 1.4.1. DOM树是什么? 1.4.2. DOM 树的作用 1.5 ...
CSS样式（一）- 基本语法
css样式 - 基本语法 css样式语法 - 基本语法格式 css又叫层叠样式表 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明选择器: 通常是您需要改变样式的HTML元素例如: ...
外联式css怎么写_如何链接外部CSS样式表
展开全部链接外部样式文件外部引入CSS样式文件是通过link标签实现的,它只能位于HTML文档的head标签内,且必须有href属性,该属性用于指定62616964757a686964616fe4 ...
html取消自动换行怎么设置,css样式设置不自动换行而是隐藏的方法
css样式里面如何设置超出部分不换行而是自动隐藏呢?请看下面的例子: .xg ul li p { height: 36px; line-height: 18px; overflow: hidden; ...
CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...
css view a if属性,uni-app学习笔记（2）view属性控制css样式
uni-app学习笔记(2)view属性控制css样式 uniapp通过标签属性来改变样式当鼠标按下去的时候,他会变成这个样式 hover-class="box-active" ...

CSS样式:background-position word-wrap是控制换行的。

CSS样式:background-position word-wrap是控制换行的。相关推荐

最新文章

热门文章