css 背景图片及定位

2024-11-03

CSS常用背景图片定位方法

CSS背景图片定位其实对于每一位学习前端的同学来说,都已经非常熟悉了.网上铺天盖地的最常见的一种方案就是在父元素中relative,然后子元素absolute.这种方案当然好,不过带来的一个缺点就是会改变元素的层级关系,如果在多个地方使用,这样的层叠嵌套的关系会十分混乱. 先暂时抛弃那种方案,给大家分享几种CSS背景图片定位的方案. 整篇文章会按照如下思路: 1.无依赖的absolute定位 2.background-position扩展语法 3.background-origin定位 4.ca

CSS 背景图片的定位和缩放

在 CSS 中,利用 background-image 属性我们可以指定元素的背景图片,例如: .example { background-image: url(image/some.png); background-repeat: repeat; } 其中,PNG 是常见的背景图片格式:较新的浏览器,比如 Chrome 8+,Firefox 4+,IE 9+,Opera 9.5+ 和 Safari 5+,也支持使用 SVG 格式的背景图片.当背景图片大小超过元素的大小时,我们可以用 backg

css背景图片定位练习（一）

首先准备一张雪碧图,Like this 背景图片的定位方法有3种,比较常用的两种为关键字:background-position: top left; (top/bottom/cennter/left/right) 像素:background-position: 水平移动px 垂直移动px; 关键词: 其中关键字方法background-position: top left 和left top效果是一样的.(注意:如果您仅规定了一个关键词,那么第二个值将是"center".) 关于像

CSS背景图片定位

原文:CSS背景图片定位在网页开发中我们经常需要对图片进行分割(如下图)来使用,而不是分别提供单独的图片来调用,常见的如页面背景,按钮图标等,这样做的好处就是减少请求次数,节省时间和带宽. 对背景图片的定位就需要用到CSS中的background样式,如: div{ background-image: url("1234.png"); background-repeat: no-repeat; background-position: 0px -100px; } 属性解释: back

Bootstrap css背景图片的设置

一. 网页中添加图片的方式有两种一种是:通过<img>标签直接插入到html中另一种是:通过css背景属性添加居中方法:水平居中的text-align:center 和 margin:0 auto 极客学院例子http://www.jikexueyuan.com/course/656_3.html?ss=1 css背景图片的设置: http://paranimage.com/css-background-attribute/ 概述 CSS2 中有5个主要的背景(background)属性

css背景图片拉伸以及100% 满屏显示

如何用css背景图片拉伸以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在css2.1之前是不能被修改的. 所以实际的结果是只能重复显示,所以出现了repeat,repeat-x,repeat-y,no-repeat这些属性.就是用来控制背景图片的显示的.所以一般用作背景图片的有2类: 1.是一整张大图,尺寸和区域大小刚好吻合 2.一个很小的条状图,通过repeat后

div css背景图片不显示

我们在写页面时,为了便于维护,css样式通常都是通过link外部导入html的,有时在css中写入背景图片时,此时背景图片的路径应该是相对css文件的.比如,此时的文件有index.html,css.img.js三个文件夹(各自存放css样式表.img图片.js文件),图片a.png在css背景图片的路径应为:../img/a.png,而不是相对于index.html文件的路径img/a.png. 即:背景图片的相对路径写在哪里,就相对于谁来计算路径.

【IE6的疯狂之八】链接伪类（:hover）CSS背景图片有闪动BUG

IE6下链接伪类(:hover)CSS背景图片有闪动BUG,主要原因ie会再一次请求这张图片,或者说图片没被缓存. 例如: CSS代码 a:hover{background:url(imagepath)} 常用的解决方案: 在页面底部添加以下IE6专用代码,让IE6缓存CSS背景图片至本地,这样a:hover时IE6就不会再重新向服务器请求加载背景图片了. XML/HTML代码 <!–[if IE 6]> <script type=”text/javascript”> docume

【转】链接伪类（:hover）CSS背景图片有闪动BUG

来源:http://www.css88.com/archives/744 ------------------------------------------------------------------------------------------------- IE6下链接伪类(:hover)CSS背景图片有闪动BUG,主要原因ie会再一次请求这张图片,或者说图片没被缓存. 例如: CSS代码 a:hover{background:url(imagepath)} 常用的解决方案: 在页面

兼容各浏览器的css背景图片拉伸代码

需要用到背景图拉伸,找到了下面这段css代码: filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='***.jpg' , sizingMethod= 'scale' ); 在ie中试用了一下还不错,背景图片可以拉伸了,但看到用了滤镜,看来火狐.谷歌等应该不兼容吧,用火狐.谷歌测试了下,背景图片没有了.东找西找,终于找到了可以兼容各个浏览器的css背景图片拉伸代码: background-image:url(***.jpg

css背景图片拉伸

css背景图片拉伸 background-image:url(bg.png); -moz-background-size: 100% 100%; -o-background-size: 100% 100%; -webkit-background-size: 100% 100%; background-size: 100% 100%; -moz-border-image: url(bg.png) 0; background-repeat:no-repeat\9; background-image:

css背景图片位置：background的position（转）

css背景图片位置:background的position position的两个参数:水平方向的位置,垂直方向的位置----------该位置是指背景图片相对于前景对象的 1.background:url(../image/header.jpg) no-repeat left top; /*相当于0% 0%*/表示背景图片在指定div的位置,从左上角开始 2.background:url(../image/header.jpg) no-repeat right bottom; /*相

利用wget 抓取网站网页包括css背景图片

利用wget 抓取网站网页包括css背景图片 wget是一款非常优秀的http/ftp下载工具,它功能强大,而且几乎所有的unix系统上都有.不过用它来dump比较现代的网站会有一个问题:不支持css文件,它不会自动下载.重新链接css中所指定的图片.这个问题导致的最常见的后果是dump下来的网站看不到背景图片.本文所介绍的这个脚本主要就是用来解决这个缺陷的. 这里简要介绍一下这个脚本的细节: 第3行用于设置要下载的网站的地址. 第10行用于将文件名转换为windows兼容的

vue打包后css背景图片地址找不到

背景图片变成了这样:static/css/static/imgs/xxx.jpg 解决方法,修改build/utils,添加 publicPath: '../../' 就行对比了下,components目录下的css背景图片也没有出现这种问题,出现问题的是src/base目录,目前只知道是vue-loader的问题解决参考:https://www.cnblogs.com/libo0125ok/p/9361038.html

css背景图片加载失败，页面部分图标无法显示

1.问题表现:首屏缺失部分图标.点击按钮切换为激活状态时,部分按钮的激活态图标无法显示. 2.问题原因:网络极差,断断续续,点击时添加class:active变为激活态, active.png这张图片是在添加active这个class才加载的, css背景图片只加载一次,不管成功还是失败都不再加载第二次了, 所以刚好网络断掉时加载了active.png失败,不刷新的话,以后就再也看不到这张图片了 3.解决办法: 方法一: 把所有图片做成spirit图,首次就可以把所有图片加载好,不会出现部分图片

css背景图片定位练习（二）： background-position的百分比

background-position:x y; 百分比定位并不能直观的看出来,需要通过计算. background-position百分比计算公式: (容器宽度—背景图片的宽度)*x%=xpx(容器高度—背景图片的高度)*y%=ypx 上节我们使用的图片也可以继续拿来做练习: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <titl

CSS 背景图片添加重复和定位。

<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="K

CSS学习（二）：背景图片如何定位？

我们都知道background-position属性用来指定背景图片应该出现的位置,可以使用关键字.绝对值和相对值进行指定.在CSS Sprites中,这个属性使用比较频繁,使用过程中,我常混淆,经常切不到自己想要的效果,于是决定好好理解其工作机制,这篇文章就是介绍background-position属性是如何指定背景图片和背景区域的位置关系. 注意:segmentfault对CodePen嵌入支持度不是很好,为使文章整洁,我将嵌入代码全部删除,完整体验请猛戳此处! background-po

HTML+CSS—背景图片、图片定位

设置背景图片格式: background-image: url(img/ic.jpg); 注意点: 如果父容器面积大于背景图片,默认显示该图片整面平铺设置是否需要平铺属性: background-repeat: no-repeat(不平铺) background-repeat: repeat-y(垂直方向平铺) background-repeat: repeat-x(水平方向平铺) .box{ background-image: url(img/bdlogo.gif); background-

CSS背景图片常见属性设置

在CSS中,图片属性的设置是必不可少的,下面介绍一下常见的图片属性: 1)背景图片插入:background-image:url(位置及名称); //默认在父级元素内的左上角 2)背景平铺方式:background-repeat:no-repeat; //不平铺 3)背景位置:background-position:right bottom; //横向在右边,纵向在下边,即右下角 center center; //位

CSS背景图片

1.背景图片插入代码格式:background-image:url(): 括号内填写图片路径 2.背景图片设置大小代码格式:background-size:宽.高 3.背景图片设置不平铺代码格式:background-repeat:no-repeat 由于背景图片插入后默认设置平铺效果,所以需使用该属性调整 4.背景图片定位代码格式:background-position:方向(top/right/bottom/left) 5.背景图片固定代码格式:background-attchme

css 背景图片及定位

热门专题