<!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. python爬虫之天气预报网站--查看最近(15天)的天气信息(正则表达式)

    python爬虫之天气预报网站--查看最近(15天)的天气信息(正则表达式) 思路: 1.首先找到一个自己想要查看天气预报的网站,选择自己想查看的地方,查看天气(例:http://www.tianqi ...

  2. LeetCode算法题-Best Time to Buy and Sell Stock

    这是悦乐书的第172次更新,第174篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第31题(顺位题号是121).假设有一个数组,其中第i个元素是第i天给定股票的价格.如果 ...

  3. JS页面打印

    平常浏览网页和文档的时候,随处可见打印两个字,有时候不小心点到或者快捷键触发到,就会弹出一个打印的页面,上边显示的打印机是GoldGrid Virtual Printer,这是计算机的虚拟打印机,打印 ...

  4. RPC入门总结（一）RPC定义和原理

    转载:深入浅出 RPC - 浅出篇 转载:RPC框架与Dubbo完整使用 转载:深入浅出 RPC - 深入篇 转载:远程调用服务(RPC)和消息队列(Message Queue)对比及其适用/不适用场 ...

  5. LDAP安装配置（windows）

    目录 概述 测试环境 安装过程 配置启动 客户端介绍 多级DC的ldif文件的配置 [一].概述 什么叫LDAP呢,概念的东西这里就不多讲了,网上搜索下有很多,本文的重点是介绍如何在windows平台 ...

  6. DataGrid获取单元格的值

    string str = (dataGrid.Columns[0].GetCellContent(dataGrid.Items[0]) as TextBlock).Text;

  7. springboot设置session超时和session监听

    2.0版本以下设置session超时时间 1.  springboot 2.0版本以下配置session超时 1.1 application.properties配置文件: spring.sessio ...

  8. sql 查询所有子节点示例

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code <!-- 查询机构的所有子机构 --> <select id=&qu ...

  9. Nginx 反向代理 -- 一路上的坑转载

    个人学习之用转子https://www.cnblogs.com/xjbBill/p/7477825.html 前些天刚过来新公司上班,公司的项目都挺多的,只不过项目都是第三方公司团队开发的,现在本公司 ...

  10. Linux：Day8(下) RAID

    RAID:Redudant Arrays of Inexpensive(Independent) Disks    廉价(独立)冗余磁盘阵列 提高IO能力:磁盘并行读写: 提高耐用性:磁盘冗余来实现: ...