登录  /  注册
首页 > web前端 > css教程 > 正文

css如何设置背景图片位置

青灯夜游
发布: 2021-05-06 18:05:49
原创
16677人浏览过

在css中,可以使用background-position属性来设置背景图片位置,该属性可以设置背景图像的起始位置,进行背景图片的定位。background-position属性需要有两个值,分别控制水平和垂直方向上的定位。

css如何设置背景图片位置

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

在css中,可以使用background-position属性来设置背景图片位置,进行背景图片的定位。

在CSS中,背景图片的定位方法有3种:

  1)关键字:background-position: top left;

  2)像素:background-position: 0px 0px;

  3)百分比:background-position: 0% 0%;

上面这三句语句,都将图片定位在背景的左上角,表面上看效果是一样的,实际上第三种定位机制与前两种完全不同。

前两种定位,都是将背景图片左上角的原点,放置在规定的位置。请看下面这张图,规定的位置是"20px 10px"和"60px 50px",都是图片的原点在那个位置上,图中用X表示。

css如何设置背景图片位置

但是第三种定位,也就是百分比定位,不是这样。它的放置规则是,图片本身(x%,y%)的那个点,与背景区域的(x%,y%)的那个点重合。比如,如果放置位置是"20% 10%",实际结果如下图,可以看到这个点是在图片本身的"20% 10%"的位置上。

2.gif

下面是一个有趣的例子。

背景图片是四个边长为100px的方块叠在一起:

css如何设置背景图片位置

请问怎样才能将其横过来:

css如何设置背景图片位置

答案是,在网页中先设置四个div区域:

<div class="box1">
</div>
<div class="box2"">
</div>
<div class="box3">
</div>
<div class="box4">
</div>
登录后复制

然后,这样编写CSS:

.box1, .box2, .box3, .box4 {
  float:left;
  width:100px;
  height:100px;
  position:relative;
  background: #F3F2E2 url(1234.png) no-repeat;
}
.box1 {
  background-position:0% 0%;
}
.box2 {
  background-position:0% 33.33333%;
}
.box3 {
  background-position:0% 66.66666%;
}
.box4 {
  background-position:0% 100%;
}
登录后复制

第二和第三个方块的设置,并不是一般想象中的"0% 25%"和"0% 75%"。

不过说实话,这个例子用像素设置法更容易一些。使用百分比设置的主要优势在于,当页面缩放的时候,背景图片也会跟着一起缩放。

(学习视频分享:css视频教程

以上就是css如何设置背景图片位置的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号