<!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. CMM/CMMI的基本概念

    "CMM是指“能力成熟度模型”,其英文全称为Capability Maturity Model for Software,英文缩写为SW-CMM,简称CMM. 它是对于软件组织在定义.实施. ...

  2. jdk8新特性表达式1

    Jdk8中有好多新的特性,比如引入Lambda,简化代码的书写等等 我们先看一个关于Lambda的使用 /*** 输出list */@Testpublic void test() { String[] ...

  3. Win 10 和 Linux 双系统，从硬盘删除Linux分区，Win 10引导修复

    由于安装双系统后,Linux 用的比较少.因此,从Win 10 磁盘管理中删除了linux 占用的磁盘空间,重启后无法进入win 10 ,出现如下情况: 有人提出,此时需要重装系统,并不用如此麻烦,通 ...

  4. 《Java大学教程》—第19章 改进用户界面

    用户与程序交互的媒介称为用户界面(user interface)或人机界面(human-computer interface). 19.2    Border接口8个实现Border接口的标准边框类: ...

  5. Redis学习笔记--Redis数据过期策略详解

    本文对Redis的过期机制简单的讲解一下 讲解之前我们先抛出一个问题,我们知道很多时候服务器经常会用到redis作为缓存,有很多数据都是临时缓存一下,可能用过之后很久都不会再用到了(比如暂存sessi ...

  6. ubuntu 安装 GCC 和 G++ C++ 开发环境

    1.先安装 :sudo apt-get install build-essential 2.查看 gcc 版本 然后安装 统一版本的 g++ gcc --version gcc (Ubuntu/Lin ...

  7. input accept属性限制文件上传格式

    上传文件的类型:具体做法如下所示: 注意:accept属性可以限制上传格式,其有兼容性如下 <1>上传.csv格式的 <input text="file" acc ...

  8. centos 防火墙的操作

    systemctl start firewalld systemctl restart firewalld systemctl status firewalld systemctl enable fi ...

  9. python入门学习：2.列表简介

    python入门学习:2.列表简介 关键点:列表 2.1 列表是什么2.2 修改.添加和删除元素2.3 组织列表 2.1 列表是什么   列表,是由一系列按特定顺序排列的元素组成.你可以创建包含字母表 ...

  10. 静默安装Oracle12.2数据库

    实验环境: 操作系统:Redhat 6.4 64位 数  据 库:Oracle 12c R2   一. 安装前准备 1. 创建用户和组 [root@wjq ~]# groupadd -g 1000 o ...