背景图的定位技巧

如果你想定位的位置是距离右边20px，距离底部10px，怎么办？

一、使用background-position的四个值语法

例如：background-position: right 20px bottom 10px;/* ie7,ie8不支持 */

二、使用 calc()
比如：background-position: calc(100% - 20px) calc(100% - 10px);

注意：使用calc() 运算符号之间要有空格

三、使用JavaScript
如果希望能够兼容所有浏览器，使用JavaScript。

background-position:dom.width-bgwidth+20 dom.height-bgheight/2+10

时间： 2024-10-11 10:48:31

背景图的定位技巧的相关文章

css中的背景色渐变以及背景图的定位

单纯的背景色渐变: background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fff), color-stop(1, #ddd)); background: linear-gradient(to bottom, #fff 0px, #ddd 100%) repeat scroll 0% 0%; 可以同时支持谷歌.火狐浏览器,兼容性比较强. 背景图的位置: background:url("images/taocan-bg.pn

项目期复习总结：背景图合并，hack，浏览器内核前缀，伪类after before

目录: 1.背景图合并和CSS Spirit 2.PS基本快捷键 3.hack技术基本书写,为什么不用? 4.内核前缀 5.伪类afterbefore 1.背景图合并和CSS Spirit 背景图合并在使用时有两种方法: ①一种就是你会PS,可以自己PS实现背景图合并成一张图片,再用background-position实现背景图的定位. ②如果你不会PS,那可以用CSS背景图合并工具,直接选好图片后在线制作生成相对应格式的图片,方便快捷. background的语法: background-c

项目期复习总结1：背景图合并，hack，浏览器内核前缀，伪类after before

文件夹: 1.背景图合并和CSS Spirit 2.PS基本快捷键 3.hack技术基本书写,为什么不用? 4.内核前缀 5.伪类afterbefore 1.背景图合并和CSS Spirit 背景图合并在使用时有两种方法: ①一种就是你会PS.能够自己PS实现背景图合并成一张图片.再用background-position实现背景图的定位. ②假设你不会PS.那能够用CSS背景图合并工具,直接选好图片后在线制作生成相相应格式的图片.方便快捷. background的语法: background-

关于c3背景图background-origin和backgroud-clip属性的梳理

background-origin属性规定背景图的定位区域,有三个值: border-box:背景图从外边框的左上角开始,即包括边框部分: padding-box:背景图从内边距的左上角开始,即不包括上和左边框部分,图片足够大会包括右和下边框部分: content-box:背景图从内容框的左上角开始: background-clip:可以理解为图片裁剪后的显示区域,有四个值 border-box:从内边距的左上角开始裁剪背景图 padding-box:将背景图位于边框内的部分裁剪掉 conten

web的定位，背景图

1)固定定位position:fixed; 参照物:浏览器窗口 2)相对定位position:relative; 参照物:自己在改变位置之前的位置 3)绝对定位position:absolute; 参照物:已经设置了相对定位的父元素 top:距离父元素的上距离 left:距离父元素的左距离背景图:background-img:url();平铺background-repeat:no-repeat/repeat-x/repeat-y;背景图位置background-position:横坐标纵坐

CSS Sprites技术(将背景图整合到一张图中，再利用CSS背景图片定位到要显示的位置)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

css背景图定位

css背景图定位 20%的功能满足80%的需求.爱.喜悦.和平. html代码 <!DOCTYPE html> <html> <head> <title>css背景图定位</title> <meta http-equiv="content-type" content="utf-8"/> <style> div{width:34px;height:34px;border:solid 1

html始终让元素居中显示，背景图铺满随便拖动不出界

首先,写两个class属性 body { margin: 0; padding: 0; height: 100%; width: 100%; background-image: url(../Content/Images/background.jpg); background-repeat: no-repeat; background-size: cover; } .login { height: 300px; width: 400px; border: 1px solid #f00; posi

如何使用 css3 transform 属性来变换背景图？

本文和大家分享的主要是使用 css3 transform 属性来变换背景图相关内容,一起来看看吧,希望对大家学习css3有所帮助. 使用 css3 transform 属性可以轻易的旋转,倾斜,缩放任何元素.目前即使没有任何前缀也可以在绝大部分浏览器上很好的使用 . 如果你要在黑莓浏览器或者 UC 浏览器使用这个属性, 你需要加 -webkit- 前缀. #myelement { -webkit-transform: rotate(30deg); transform: rotate(30deg)