CSS那个背景图片的坐标怎么设置?怎么计算的?
background:url(images/hh.gif) no-repeat -10px 0;},作用是移动背景的位置.
背影图片的左上角相对当前元素左上角的坐标。
右为X轴正半轴, 下为Y轴正半轴
当前元素左上角坐标为 0,0
默认图片的左上角正对当前元素的左上角
如果图片想向左移 10px;
代码如下:
如果图片想向上移 10px;
代码如下:
同样
如果图片想向右移 10px;
代码如下:
做了个图片, 黑色框是要加背景的容器。
代码如下:
CSS那个背景图片的坐标怎么设置?怎么计算的?的更多相关文章
- CSS中对图片(background)的一些设置心得总结
写网页的时候很多情况需要对图片进行操作,如何在不进行专业的美工裁切操作的情况下而让自己的素材度达到最大的满意度呢,这是一个问题,对于懒得开ps切图的我,通常会直接在网络上download一张图片,直接 ...
- CSS中背景图片定位方法
转自:http://www.ruanyifeng.com/blog/2008/05/css_background_image_positioning.html 作者: 阮一峰 日期: 2008年5月 ...
- CSS background-image背景图片相关介绍
这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺.拉伸.偏移.设置大小等操作. 1. 背景图片样式分类 CSS中设置元素背景图片及其背景图片样式的属性主要以下几个: ...
- CSS中背景图片的background-position中的left top到底是相对于谁的?
在学习的时候遇到了如下问题: CSS中背景图片的background-position中的left top到底是相对于谁的,content-box?padding-box?border-box? ba ...
- (转)HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法
http://blog.csdn.net/oscar92420aaa/article/details/51304067 CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中 ...
- HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法
CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:bac ...
- css的背景图片background
1.使用背景图片的标签定设置宽高,没有设置的话,也需要用内容来撑开标签. 2.如果对同一个标签分开设置背景图片和颜色,背景颜色一定要写在背景图片后面,不然会被覆盖 <!DOCTYPE html& ...
- 【CSS】css网页背景图片设置
刚学CSS,了解了下网页背景图设置,顺便记录下. 下面主要是实现背景图位置保持不变,即不随滚动条动而动的功能. body { background-image:url(images/bck.png); ...
- css样式背景图片设置缩放
一.背景颜色图片平铺 background-color 背景颜色 background-image 背景图片地址 background-repeat 是否平铺 默认是平铺 background-pos ...
随机推荐
- 【数据售卖平台】—— Vue2.0入门学习项目爬坑
前言:这个项目是我从零学习Vue2.0时用于练习基础知识的入门项目,包含了Vue2.0几乎所有项目都会用到的基础功能,是新手用来练手的好项目,这里温故知新对功能点做一个总结.github地址:http ...
- IntelliJ IDEA启动加速
IntelliJ IDEA启动加速 学习了:https://blog.csdn.net/xiaosheng_papa/article/details/50378033 需要把插件都不加载就会快一些: ...
- C# 调用API接口处理公共类 自带JSON实体互转类
using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Net ...
- Linux Sed命令具体解释+怎样替换换行符"\n"(非常多面试问道)
Sed Sed是一个强大的文本处理工具 能够採用正则匹配.对文本进行插入删除改动等操作 Sed处理的时候,一次处理一行,每一次把当前处理的存放在暂时缓冲区.处理完后输出缓冲区内容到屏幕,然后把下一行读 ...
- Laravel 5.4的本地化
简介 Laravel 的本地化功能提供方便的方法来获取多语言的字符串,让你的网站可以简单的支持多语言. 语言包存放在 resources/lang 目录下的文件里.在此目录中应该有应用对应支持的语言并 ...
- Oracle 11g新增not null的字段比10g快--新特性
在11g之前添加一个not null的字段很慢.在11g之后就很快了.我们先做一个測试,然后探究下原理. SQL> select * from v$version; BANNER ------- ...
- 多通道 移位寄存器 verilog
// Quartus II Verilog Template // Basic 64-stage shift register with multiple taps module basic_shif ...
- 【GoldenGate】使用OGG,两个Oracle库之间单向同步数据
************************************************************************ ****原文:blog.csdn.net/clark_ ...
- 一张图帮你看懂 iPhone 6 Plus 的屏幕分辨率
一张图帮你看懂 iPhone 6 Plus 的屏幕分辨率 几天前公布的 iPhone 6 Plus 官方标称屏幕是 1920 x 1080 的,可是在 Xcode 中我们发现模拟器的屏幕事实上是看似奇 ...
- RethinkDB创始人教你怎样找到创业点子
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemh1YmFpdGlhbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...