<!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. java求解第N个素数(质数)

    面试中,遇到一个题目:求解第N个素数. import java.util.Scanner; public class GetPrimeNumber { public static int NthPri ...

  2. LeetCode算法题-Single Number（Java实现）

    这是悦乐书的第175次更新,第177篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第34题(顺位题号是136).给定一个非空的整数数组,除了一个元素外,每个元素都会出现两 ...

  3. layui 的 GitHub 及 Gitee (码云) 仓库

    GitHub: https://github.com/sentsin/layui/ Gitee:https://gitee.com/sentsin/layui

  4. 线程--继承Thread

    首先继承Thread类,然后重写Thread类的run()方法. Thread类的子类的对象调用start()方法,然后虚拟机就会调用该线程的run()方法. 当程序执行到start()方法时,线程启 ...

  5. java实现支付宝支付及退款（二）

    紧跟上篇博客,本篇将书写具体的代码实现 开发环境:SSM.maven.JDK8.0 1.Maven坐标 <!--阿里支付--> <dependency> <groupId ...

  6. JDBC复习1

    1.什么是JDBC JDBC是java数据库连接技术的简称(Java DataBase Connectivity) jdbc是接口,jdbc驱动才是接口的实现,负责连接各种不同的数据库.jdbc的AP ...

  7. Node.js作web服务器总结

    1.为什么Node.js用JS开发    Node.js 含有一系列内置模块,使得程序可以脱离 Apache HTTP Server 或 IIS,作为独立服务器运行. 首先,我们都清楚的是,同时接收数 ...

  8. MySQL大小写敏感的解决方案

    前言:对于MySQL的大小写敏感的影响,笔者在一个小项目中深刻的体会到:当想要查询一条数据时,总是出来两条或多条,后来发现是大小写敏感造成的原因,本文就该问题提出解决方案. 1.MySQL大小写敏感的 ...

  9. ElasticSearch（五）：Java操作ElasticSearch执行查询

    package com.gxy.ESChap01; import java.net.InetAddress; import org.elasticsearch.action.search.Search ...

  10. centos7下如何隐藏nginx的版本号

    我们在访问nginx的时候会暴露nginx的版本号,如何将这些版本号隐藏呢? 其实隐藏版本号非常简单 在nginx的配置文件中添加一个server——tokens  off:参数就可以了,下面进行操作 ...