<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>36-背景定位属性</title>

    <style>

        div{

            /*width: 500px;*/

            height: 500px;

        }

        .box1{

            /*background-color: red;*/

            /*background-image: url(images/girl.jpg);*/

            /*background-repeat: no-repeat;*/

            /*background-position: left top;*/

            /*background-position: right top;*/

            /*background-position: right bottom;*/

            /*background-position: left bottom;*/

            /*background-position: center center;*/

            /*background-position: left center;*/

            /*background-position: center top;*/

            /*background-position: 100px 0;*/

            /*background-position: 100px 200px;*/

            /*background-position: -100px -100px;*/

            background-image: url(images/yxlm.jpg);

            background-position: center top;

        }

    </style>

</head>

<body>

<!--

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

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

2.格式:

background-position: 水平方向 垂直方向;

3.取值

2.1具体的方位名词

水平方向: left center right

垂直方向: top center bottom

2.2具体的像素

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

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

记住具体的像素是可以接收负数的

快捷键:

bp background-position: 0 0;

注意点:

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

-->

<div class="box1">

    <!--<img src="data:images/yxlm.jpg" alt="">-->

</div>

</body>

</html>

H5 36-背景定位属性的更多相关文章

  1. css 背景(background)属性、背景图定位

    background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...

  2. Web前端篇：CSS常用格式化排版、盒模型、浮动、定位、背景边框属性

    目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...

  3. [css]《css揭秘》学习（三）-灵活的背景定位

    一.background-position属性 使用该属性,在不确定容器大小的情况下,也可以指定图案距离容器边缘的位置:但是需要为不支持该属性的浏览器指定回退方案,否则,图案会默认放在左上角. < ...

  4. [css 揭秘]：CSS揭秘 技巧（三）：背景定位

    我的github地址:https://github.com/FannieGirl/ifannie 源码都在这上面哦! 喜欢的给我一个星吧 背景定位 问题:很多时候,我们想针对容器某个角对背景图片做便宜 ...

  5. CSS属性：定位属性（图文详解）

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. CSS的定位属性有三种,分别是绝对定位.相对定位.固定定位. posit ...

  6. 背景新增属性和css渐变及倒影

    背景新增属性和css渐变及倒影 一.background新增属性 background-size:指定对象的背景图像的尺寸大小. background:url() 0 0,url() 0 100%;多 ...

  7. CSS3之背景定位原点background-origin

    背景定位原点background-origin是CSS3新添加的有关背景的属性,主要是改变背景起始的原点位置的.CSS3之背景定位原点background-origin的属性值有三个:border.p ...

  8. css中的定位属性position（转）

    css中的定位属性position   同样的也是上课的时候发现学生难以理解的一些问题拿出来记录一下,希望帮助初学者. 在css中定位属性position的运用在页面中是很常用的,特别是一些结合js来 ...

  9. CSS入门（背景各种属性的详解、垂直居中和过渡效果的详解、渐变效果的简单讲解、雪碧图和精灵图）

    一.各种背景属性 1.background-image 属性为元素设置背景图像. 元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距. 默认地,背景图像位于元素的左上角,并在水平和垂直方 ...

随机推荐

  1. 卸载时候出现： windows installer 程序有问题。此安装需要的dll不能运行 的一个解决方法

    卸载时候出现: windows installer 程序有问题.此安装需要的dll不能运行 安装Your Uninstaller来卸载

  2. KMP算法详解-彻底清楚了(转载+部分原创)

    引言 KMP算法指的是字符串模式匹配算法,问题是:在主串T中找到第一次出现完整子串P时的起始位置.该算法是三位大牛:D.E.Knuth.J.H.Morris和V.R.Pratt同时发现的,以其名字首字 ...

  3. 极致精简的webservice集成例子

    极致精简的webservice例子   看了网上好多关于webservice的例子,基本上对初学者来说都是模棱两可云里雾里,现在,我将网上关于webservice的讲解提炼出来,通过一个最简单使用并且 ...

  4. memset memcmp memcpy memmove 自己实现

    memset memcmp memcpy memmove 自己实现 memset #include <stdio.h> #include <memory.h> #include ...

  5. Python 面向对象的特性2-----继承

    面向对象的三大特性 1.封装 根据职责将属性和方法封装到一个抽象的类中,然后类创建一个实实在在的对象,有了对象以后,就可以访问到对象内部的属性,或者让对象来调用一个已经封装好的方法. 2.继承 实现代 ...

  6. php的register_long_arrays可以关闭以提高性能

    如果你使用php5.0以上,在程序中没有使用$HTTP_*_VARS这种变量,那么就可以考虑将register_long_arrays设置为Off,来提高一点点性能.看下PHP手册中关于registe ...

  7. 解决终端SSH连接服务器一段时间不操作之后卡死的问题

    卡死是因为LIUNX安全设置问题,在一段时间内没有使用数据的情况下会自动断开,解决方法就是让本地或者服务器隔一段时间发送一个请求给对方即可 在本地打开配置文件(不建议在server端设置) sudo ...

  8. 16.Python网络爬虫之Scrapy框架（CrawlSpider）

    引入 提问:如果想要通过爬虫程序去爬取”糗百“全站数据新闻数据的话,有几种实现方法? 方法一:基于Scrapy框架中的Spider的递归爬取进行实现(Request模块递归回调parse方法). 方法 ...

  9. 基于vue-cli的vue项目移动端样式适配，lib-flexible和postcss-px2rem

    安装 flexible和 postcss-px2rem(命令行安装) npm install lib-flexible --save npm install postcss-px2rem --save ...

  10. 「AHOI / HNOI2017」影魔

    「AHOI / HNOI2017」影魔 题目描述 解决这类比较复杂的区间贡献问题关键在于找到计算的对象. 比如这道题,我们计算的对象就是区间中间的最大值. 对于点\(i\),我们找到左边第一个比他大的 ...