您现在的位置是：网站首页> 编程资料编程资料

div背景定位background设置元素的背景参数用滤镜实现背景图片的拉伸效果代码css 如何让背景图片拉伸填充避免重复显示CSS背景图拉伸效果兼容FF/Chrome/IE等主流浏览器(亲测)table自动拉伸在chrome与IE中的兼容性问题解决按钮在IE中两边被拉伸的 BUGCSS background属性(背景属性)详解对背景图定位中background-position属性的自我理解css3实现背景图片拉伸效果像桌面壁纸一样

2023-10-28 276人已围观

简介 DIV背景定义参数：background 设置元素的背景参数,div+css的广泛使用，也改变了这一使用习惯，变成了将N多小图标集于一个大图上，再通过div来定位需要用到的图片部分，大大提升了网页刷新的速度,感兴趣的朋友可以了解下或许对你有所帮助

我都是会把工作中接触到的新知识放在我的微博里面，但是由于微博总是限制我的字数，有很多内容我都是分散成几个部分，现在我就来整理一个，我积累的一个页面布局的内容。

在早期table风行的年代，页面布局中使用的小图标，和背景会让你的页面中有非常多的图片素材，这样在加载的过程中就会很拖网速，造成页面的用户体验不好，现在div+css的广泛使用，也改变了这一使用习惯，变成了将N多小图标集于一个大图上，再通过div来定位需要用到的图片部分，这样操作能让你的页面少加载非常多的图片素材，大大提升了网页刷新的速度。

DIV背景定义参数：background 设置元素的背景参数，其中属性依在写博客之前我都是会把工作中接触到的新知识放在我的微博里面，但是由于微博总是限制我的字数，有很多内容我都是分散成几个部分，现在我就来整理一个，我积累的一个页面布局的内容。

在早期table风行的年代，页面布局中使用的小图标，和背景会让你的页面中有非常多的图片素材，这样在加载的过程中就会很拖网速，造成页面的用户体验不好，现在div+css的广泛使用，也改变了这一使用习惯，变成了将N多小图标集于一个大图上，再通过div来定位需要用到的图片部分，这样操作能让你的页面少加载非常多的图片素材，大大提升了网页刷新的速度。

DIV背景定义参数：background 设置元素的背景参数，其中属性依次为 background-color(背景色) | background-image(背景图) | background-repeat(重复方式) | background-attachment(背景图像固定还是滚动) | background-position(背景图像位置)

关于background-position 定位的问题在一张大背景下对某一块的取用时大背景的左上角为原点(0,0)，定位时，→指向x值减小,↓指向 y 值减少所以在定位中，通常都是两个负数，在对定位的div进行width height 限制就可以取出自己想要的背景图片了！

通常在使用的时候样式中定义为 background: url(/templates/v1/images/tips.png) 0 -17px; 这种格式是现在最常用的背景定位方式

写一段完整的吧：

复制代码

代码如下:

.up_tip {
width: 20px; //定义高度和宽度
height: 18px;
background: url(/templates/v1/images/tips.png) 0 -17px; 定位图片位置
display: inline-block; //这个比较重要，
}

文章最后先吐槽下，谈谈自己对互联网的一些看法，这也算受限制的内容，我去，现在互联网是有多TM不能讲话啊，带几个链接说你发广告，说几句评价，说尼玛负面新闻，一群编辑这么怕老板抽你！？

算了还是专心写我的技术贴，因为我是web前端从业者，文章内容难免会涉及到某个网站，在这里还请那些审核的编辑们，别弄得跟seo很肮脏一样，见到这种就想删说明你们自己思想有问题次为 background-color(背景色) | background-image(背景图) | background-repeat(重复方式) | background-attachment(背景图像固定还是滚动) | background-position(背景图像位置)
　　关于background-position 定位的问题在一张大背景下对某一块的取用时大背景的左上角为原点(0,0)，定位时，→指向x值减小,↓指向 y 值减少所以在定位中，通常都是两个负数，在对定位的div进行width height 限制就可以取出自己想要的背景图片了！
　　
通常在使用的时候样式中定义为 background: url(/templates/v1/images/tips.png) 0 -17px; 这种格式是现在最常用的背景定位方式
写一段完整的吧：

复制代码

代码如下:

　
.up_tip {
width: 20px; //定义高度和宽度
height: 18px;
background: url(/templates/v1/images/tips.png) 0 -17px; //定位图片位置这里可以相对路径也可以绝对路径
display: inline-block; //这个比较重要，
}

上一篇：css中伪类:after的用法(三种方式)css a标签的visied伪类失效原因介绍a标签的四个css伪类(link、visited、hover、active)样式理解css伪类伪元素域高级选择器的介绍应用before/after伪类时如何CSS命名以及针对ie6/ie7浏览器兼容ie6不支持hover ie6 标签(除a标签)不支持伪类:hover解决方案CSS中a标签样式的“爱恨”原则：定义链接样式的四个伪类有关于a标签的4个伪类的使用方法a标签伪类的作用及书写顺序是什么

下一篇：8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果

您现在的位置是：网站首页> 编程资料编程资料

相关内容

点击排行

本栏推荐

猜你喜欢