background 定位

最新推荐文章于 2023-04-20 08:00:00 发布
最新推荐文章于 2023-04-20 08:00:00 发布
阅读量258 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/fengkun125/p/9515363.html
版权

1.background : 

　　background-image : ul(链接的图片地址);默认横向平铺,纵向平铺.

　　background-repeat : repeat ; 默认;

　　　　　　　　　　　no-repeat : 不平铺;

　　　　　　　　　　　repeat-x : 横向平铺;

　　　　　　　　　　    repeat-y : 纵向平铺;

　　background-position : x y ;

　　　　如果为正值,那么表示调整图片的位置; 如果为负值, 精灵图切图;

　　background-attachment : fixed ;    不会随着父盒子的滚动而滚动;

　　background-position : center top;  让图片居中显示;

　　background : ul(图片地址) no-repeat x y;

实例 : 

 

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height:2000px;
            /*background-image:url(1.gif)*/
        }
        .box{
            width:25px;
            height:13px;
            border:1px solid red;
            /*background-image:url(1.gif);*/
            /*background-repeat:no-repeat;*/
            /*background-position 如果为正值相当于调整位置图的位置*/
            /*background-position: 20px 30px;*/
            /*background-position:-25px -60px;*/
            background:url(1.gif) no-repeat -25px -60px;
            /*让背景图居中显示*/
            /*background-position:center top;*/
        }
        .广告{
            width:100%;
            height:120px;
            background-image:url(../day48代码练习/cms_15331133395269_fKTMV.jpg);
            background-repeat:no-repeat;
            background-position:center top;
        }
        .active{
            width:132px;
            height:132px;
            background-image:url(1.gif);
            background-repeat:no-repeat;

            background-attachment:fixed;/*不会随着页面的滚动而滚动*/
            border:1px solid red;
            /*如果为负值 在一张大图上扣小图  这就是精灵图技术*/
            background-position:0 200px;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="" alt="">
    </div>
    <div class="广告"></div>
    <div class="active"></div>
</body>
</html>

 

2.定位

　　四种定位 : 

　　　　position : static : 静态定位;

　　　　　　　　 relative : 相对定位;

　　　　　　　　作用:  1.微调元素;

　　　　　　　　　　　2.可以做"父相子绝"参考;

　　　　　　　　　　　3.如果当前这个标准流的盒子设置相对定位,那么他跟标准流下的盒子是一样的;　　　　　　

　　相对定位的参考点 : 相对于原来的位置调整位置;

　　记住 : 

　　　　　1.不要用相对定位做压盖现象,因为相对定位会留坑;

　　　　　2.设置定位之后,它的层级大于标准流的盒子;

　　　　　3.相对的盒子不脱离标准流;

absolute : 绝对定位;

　　现象 : 1.脱标    2.做压盖 , 层级高;

　　1.绝对定位参考点 : 

　　单独设置绝对定位 : top描述;

　　　　　　　　参考点 : 页面的左上角(跟浏览器的左上角区分);

　　单独设置绝对定位 : buttom描述;

　　　　　　　　参考点 : 浏览器的左下角;

2.当有父子盒子嵌套时参考点 :

　　父辈元素设置相对定位 , 子元素设置绝对定位 , 那么子元素是以最近父辈元素(必须设置相对定位)的左上角为参考点来调整位置 .

绝对定位的盒子居中 :   left : 50%;

　　　　　　　　　　 margin-left : 负的该盒子宽度的一半 ;

实例 :

 

绝对定位的盒子居中
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .box{
            width:100%;
            height:400px;
            position:relative;
            background-color:red;
        }
        .wrap{
            width:500px;
            height:400px;
            position:absolute;
            background-color:green;
            /*margin:0 auto;不起作用
            left:50%;
            margin-left:-宽度的一半;
            */
            left:50%;
            margin-left:-250px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="wrap"></div>
    </div>
</body>
</html>

 

fixed : 固定定位.

　　1.脱标;

　　2.层级提高;

　　参考点 : 浏览器的左上角;

　　应用 : 固定导航栏 , 广告 , 回到顶部;

固定定位的示例 :

 

固定定位
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            padding-top:100px;
        }
        .header{
            width:100%;
            height:100px;
            background-color:red;
            position:fixed;
            top:0;
            left:0;
            z-index:9999;
        }
        .wrap{
            width:100%;
            height:1000px;
            background-color:green;
            /*margin-top:100px;*/
        }
        .top{
            width:100px;
            height:100px;
            background-color:yellow;
            position:fixed;
            right:0;
            bottom:100px;
            line-height:100px;
            text-align:center;
        }
        .wrap a{
            position:relative;
            z-index:99;
        }
    </style>
</head>
<body style="height:2000px;">
    <div class="header"></div>
    <div class="wrap">
        <a href="#">百度一下</a>
    </div>
    <div class="top">回到顶部</div>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
   <script>

      $('.top').click(function() {
         $('html,body').animate({
            scrollTop:0
         },2000)
      });
   </script>
</body>
</html>

 

只要盒子设置浮动了 , 固定定位 , 绝对定位了;

　　1.脱标;   2.可以设置任意宽高;

3.z-index :

　　前提条件 : 必须设置定位;

　　1.z-index值表示谁压着谁 , 数值大的压着数值小的 ;

　　2.只有定位了的元素,才能有z-index , 也就是说,不管 相对定位 , 绝对定位 , 固定定位 都可以使用z-index;

　　3.z-index值没有单位,就是一个正整数,默认的z-index值为0,如果大家都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁在上面压着别人,定位了的元素,永远压住没有定位的元素;

　　4.从父现象 : 父亲的z-index小 , 儿子的z-index再大也没有用;

实例 :

 

父的z-index小,子不过多大都会被覆盖,如果z-index一样大,谁是后面的是的为大
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .ti{
            width:300px;
            height:300px;
            background-color:green;
            position:relative;
            z-index:2;
            border-radius:50%;
        }
        .ha{
            width:300px;
            height:300px;
            background-color:yellow;
            position:relative;;
            z-index:2;
        }
        .ni{
            width:100px;
            height:100px;
            background-color:red;
            position:absolute;
            top:280px;
            left:350px;
            z-index:2;
        }
        .fa{
            width:100px;
            height:100px;
            background-color:black;
            position:absolute;
            top:-50px;
            left:350px;
        }
    </style>
</head>
<body>
    <div class="ti">
        <div class="ni"></div>
    </div>
    <div class="ha">
        <div class="fa"></div>
    </div>
</body>
</html>

 

转载于:https://www.cnblogs.com/fengkun125/p/9515363.html

p是马甲
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS background-position 属性 定位图片
09-25
看别人代码发现一个背景图中有很多图片，大家可以参考下原理
background的属性和背景图片定位的实例
08-20 686
本文内容： 　　1.背景图片定位示例 　　2.background常用的属性值 　　3.background-repeat新增的round、space属性 　　4.background-size的属性值（着重介绍contain、cover） 　　5.background-origin属性值（borde-box、padding-box、content-box） 　　6.多背景图...
CSS基础——定位及背景处理
ybb_ymm的专栏
04-20 1753
解决这个问题，我们就可以使用我们这个负值的情况了。1、将我们多个图片整合到一张图片里面，浏览器只需要进行一个请求，就可以同时加载我们需要的多张图片，提高了访问的效率，提高用户的体验度。4、可以同时为一个元素指定背景颜色和北京图片，背景颜色将作为背景图片的底色来战士，一般设置背景图片的同时都会设置一个背景颜色。因为，加载的时候是需要一定的时间的，所以在加载和显示的时候会穿线一段时间背景图片无法显示，这就会导致白屏或者闪烁的问题！注意：不随窗口滚动的图片，我们一般都是设置给body，而不是设置给其他的元素的。
html背景定位,css background-position center left right top bottom代表意思
weixin_39633917的博客
06-07 2942
background-position:center right这里center right分别代表什么,引入对图片背景定位介绍background-position是用于定位背景图片中对象中显示定位，比如图片作为背景时在对象内什么位置开始显示，显示样式等。比如让一个图片作为对象背景距离对象左边或右边多少间距开始显示，距离对象上边或下边多少间距开始显示，或者用常见left、right、center...
background-image的用法
热门推荐
lxiaopfeng的博客
09-09 15万+
background-image将图片作为背景，配合使用的属性background-repeat、background-position、还有css3才有的background-size，下面通过几个图片来展示这几个结合使用实现图片作为背景（如搜索框中的一个搜索图片）        1、background-image的用法，为图像制定url：       2、background-rep
【CSS】定位布局，背景(background)，伪元素
李小浦的博客
10-04 353
❤️ Author： 老九🙏 个人名言：不可控之事 乐观面对。
background-postion定位与图片结合实现圆角效果
01-21
background-postion 背景默认铺设位置的起点为：元素的左上角。 ——————————————————————————– background-color 不能继承，其默认值是 transparent。transparent 有“透明”之意。也...
利用CSS定位背景图片 background-position
09-25
我们在研究其他的网站的样式的时候经常会发现一种情况，就是在很多background属性里都调用同一张图片，来满足网页各个部分的使用。打开这种图片看一下，会发现这张图片上包含了很多小图片;
CSS3背景定位
CH_Y的博客
10-24 2083
针对某个容器的某个角落，使用了background-position和使用calc()函数对背景图片进行偏移定位，解决了CSS3背景定位问题。
html页面背景位置,background位置
weixin_42315537的博客
06-03 1997
css问题：如何用background定位我看一些大的网站上面，好多地方有用到图标的地方，都是将这些小图标整background:url(图片地址); background-position:12px -12px; //显示图片的X坐标 和Y坐标 简单的，你找一下background-position的用法，很多介绍的。css怎么调整背景图片的位置？background:url(/../../im...
php background,CSS BACKGROUND定位背景上下左右偏移
weixin_39812465的博客
03-10 2186
css中我们经常使用background加载图片作为背景，这个背景图片可以通过具体属性的设置调整其上下左右偏移，调整背景图的上下左右偏移可以通过设置background属性或background-position属性来实现。我们以div加背景图片来举例子，其他的容器也都一样。主要来介绍一下背景background/background-position的几个属性。background语法格式：[p...
background属性
ABCFF12333的博客
06-18 319
background-color：背景色 background-image：背景图片 background-size：背景图片尺寸 background-repeat：背景图片重复(repeat,repeat-x,repeat-y,no-repeat) background-position：背景图片位置 background-attachment：背景图片是否固定不动 background-clip：背景覆盖区 background-origin：背景图片覆盖区 ...
background-position 详解
weixin_30354675的博客
01-19 352
一、语法 语法：background-position：x, y; 定义：背景图片相对容器原点的起始位置； 取值： 关键字：top | center | bottom | left | center | right 百分比：百分数 具体值：px、rem、em等确值 默认值为：0% 0%（即坐标原点） 二、定位原理 ...
Vue通过background:url 引入静态图片失效
从入门到放弃的博客
12-20 1万+
例如 <div :style="{background:'url('+img.url+')',backgroundSize:'100% 100%'}"> ...... </div> ....... img:{ url:'../../assets/bg.png', name: 'bg' } 发现设置背景失败了，图片加载不出来，主要原因是bac...
CSS背景属性、定位
qq_46492364的博客
03-13 2009
文章目录前言一、css的常用样式-背景属性1.背景颜色 background-color2.背景图片 background-image3.背景重复 background-repeat二、使用步骤1.引入库2.读入数据总结 前言 又是内容超级多的一天啊，多也要学完，今天学校三节课呢，自己学习的时间少了点了。加油，坚持住！ 一、css的常用样式-背景属性 1.背景颜色 background-color background-color,作用在盒子区域内添加背景颜色进行修饰，在border及以内加载背景颜色.
CSS背景background详解，background-position详解
会敲代码的男老师的博客
02-03 3万+
背景(background)是css中一个重要的的部分，也是需要知道的css的基础知识之一。这篇文章将会涉及css背景(background)的基本用法，包括诸如 background-attachment 等的属性，也会介绍一些有关背景(background)的常用技巧，以及 css3 中的 背景(background)(包含4个新的背景(background)属性)。 css2 中的背景(background) 概述 CSS2 中有5个主要的背景(background)属性，它们是： * ba
xpath定位元素方法_前端css基础篇（三） background背景元素position定位以及清除浮动的四种方法...
weixin_39845220的博客
12-12 576
一、 background背景元素1. background-color背景颜色可以简写 background；默认值是transparent。（透明） 不能继承2. background-image背景图片可以简写backgroundurl（“图像的url路径地址”）图像的URL；none 表示背景上没有设置任何图像，这是默认值；inherit 指定背景图像应该从父元素继承background-...
前端css基础篇（三） background背景元素position定位以及清除浮动的四种方法
qq_41363062的博客
01-05 1807
一、 background背景元素 1. background-color背景颜色 可以简写 background；默认值是transparent。（透明） 不能继承 2. background-image背景图片 可以简写background url（“图像的url路径地址”）图像的URL； none 表示背景上没有设置任何图像，这是默认值； inherit 指定背景图像应该从父元素继承 b...
CSS 背景位置 background-position属性
歪脖先生的博客
02-17 10万+
背景位置除了背景背景平铺外，CSS还提供了另一个强大的功能，即背景定位技术，能够精确控制背景在对象中的位置。默认情况下，背景图像都是从元素 padding 区域的左上角开始出现的，但设计师往往希望背景能够出现在任何位置。通过 background-position属性，可以很轻松的控制背景图像在对象的背景区域中的起始显示位置。其语法格式为：background-position: xpos ypo...
background-position定位到下面居中
最新发布
05-31
要将背景图像定位到下面居中，可以使用以下CSS代码： ``` background-position: center bottom; ``` 这将使背景图像在容器的底部居中显示。您还可以使用像素或百分比值来更精确地定位背景图像。例如： ``` background-position: 50% 80%; ``` 这将使背景图像在容器的水平中心位置和垂直方向上距离容器底部20%的位置显示。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值