资讯专栏INFORMATION COLUMN

课时97.背景定位上(掌握)

codecraft / 1672人阅读

摘要:注意点同一个标签可以同时设置背景颜色和背景图片,如果颜色和图片同时存在,那么图片会覆盖颜色,但凡给我们的标签设置了背景图片以后,我们发现这个图片一直在左上角,我如果不想让它在左上角应该怎么办呢这就要用到我们这节课的内容。

注意点:
同一个标签可以同时设置背景颜色和背景图片,如果颜色和图片同时存在,那么图片会覆盖颜色,

但凡给我们的标签设置了背景图片以后,我们发现这个图片一直在左上角,我如果不想让它在左上角应该怎么办呢?这就要用到我们这节课的内容:background-position。

1.如何控制背景图片的位置?

在CSS中有一个叫做background-position:属性,就是专门用于控制背景图片的位置的

2.格式:
background-position:水平方向  垂直方向

3.取值:

3.1 具体的方位名词

水平方向:left    center    right

垂直方向:top     center     bottom

3.2具体的像素

例如:background-position:100px   200px;

一定要记住一定要写单位,也就是一定要写px

记住具体的像素是可以接收负数的,与数学不一样的是,前端中的y轴是向下的,向左是负数,向上是负数。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/2096.html

相关文章

  • 课时98.背景定位下(掌握

    摘要:我们来看控制背景图片的位置,在企业开发中用在什么地方呢我们打开一个网站,如盛大游戏,保存它的背景图到本地我们先点击检查,查看背景图的地址然后将地址复制到地址栏中然后将图片保存到本地工程的文件夹中然后在网页中先用打开发现图片不能完全显示,然我们来看控制背景图片的位置,在企业开发中用在什么地方呢?1.我们打开一个网站,如盛大游戏,保存它的背景图到本地 http://www.sdo.com/ 我们...

    wuyangnju 评论0 收藏0
  • 课时100.背景图片和插入图片区别(掌握

    摘要:快捷键补充到这里属性基本就讲完了,然后我们还有一些的属性没有讲,但是要用到盒子模型,现在我们没有学盒子模型,所以不用讲背景图片和插入图片区别我们先来看一个例子如何快速的打出以下代码键现在,我们要分别用背景图片和插入图片的方式插入快捷键补充: bc  background-color:; bi  background-image:; bgr background-repeat:; gp  ba...

    omgdog 评论0 收藏0
  • 课时95.背景图片(掌握

    摘要:如何设置背景图片在中有一个叫做的属性,就是专门用于设置背景图片的。1.如何设置背景图片? 在css中有一个叫做background-image:url();的属性,就是专门用于设置背景图片的。 注意点: 1.图片的地址必须放在url()中,图片的地址是本地的地址,也可以是网络的地址 2.如果图片的大小没有标签的大小大,那么会自动在水平和垂直方向平铺和填充 3.如果网页上出现了图片,那...

    tylin 评论0 收藏0
  • 课时96.背景平铺(掌握

    摘要:如何控制背景图片的平铺方式在中有一个属性,就是专门用于控制背景图片的平铺方式的取值默认,在水平和垂直都需要平铺在水平和垂直都不需要平铺只在水平方向平铺只在垂直方向平铺应用场景先看原理图片可以通过背景图片的平铺来降低图片的大小,提升网1.如何控制背景图片的平铺方式? 在CSS中有一个background-repeat属性,就是专门用于控制背景图片的平铺方式的 取值: repeat   默认,在...

    alin 评论0 收藏0
  • 课时94.背景颜色(掌握

    摘要:如何设置标签的背景颜色在中有一个属性,就是专门用来设置标签的背景颜色的取值具体单词十六进制我们来依次验证一下1.如何设置标签的背景颜色? 在CSS中有一个background-color:属性,就是专门用来设置标签的背景颜色的 取值: 具体单词 rgb rgba 十六进制 我们来依次验证一下

    yintaolaowanzi 评论0 收藏0

发表评论

0条评论

codecraft

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<