<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>CSS 背景色. 背景图片. 背景重复. 背景图片固定和定位 </title>
<style type="text/css">
body{
height:3000px;
background-image:url(C:/Users/Administrator/Desktop/xxx.png);
background-repeat:no-repeat;
background-position:bottom;/*向下的*/
background-attachment:fixed;
/*给网页3000px高度 来观察背景图像固定属性 background-attachment：fixed*/
}
h1{
text-align:center;
}
p{
background-color:pink;

}
div{
/* 给背景添加图片 一定要注意 图片的取值路径 */
background-image:url(C:/Users/Administrator/Desktop/xxx.png);
background:no-repeat; /* bupingpu */
background-repeat:repeat-x;/*1.background-repeat:repeat-x 我是水平平铺 */
background-repeat:repeat-y;/*2.background-repeat:repeat-y 我是垂直平铺*/
background-attachment:fixed;
/* background-position:5px 6px; */
border:1px solid red;
height:100px;
}
</style>
</head>
<body>
<h1>1.背景色</h1>
<p>1.属性：background-color <br>
2.注意：背景颜的会填充到元素的边框 内边距 内容区域。
</p>

<h1>2.背景图片</h1>
<p>属性：background-image<br>
取值：URL（图像路径）
</p>
<div id="" class="">
小星星
</div>

<h1>3.背景重复</h1>
<p>1.默认情况 背景图会在水平 和 垂直两个方向（就是平铺）<br>
属性：background-repeat
取值repeat：默认值，水平垂直平铺。
repeat-x: 水平平铺；
repeat-y: 垂直平铺；
no-repeart：不平铺；
</p>
<h1>4.背景图像固定</h1>
<p>属性：background-attachment<br>
取值
fixed，背景图像固定 <br>background-attachment:fixed;

</p>

<h1>5.背景定位</h1>
<p>改变背景图像在元素中的位置<br>
属性：background-position<br>
取值：x y <br>
x表示水平方向移动 +向右 -向左<br>
y表示垂直方向 +向上 -向下<br>
x% y% :
0% 0% : 显示在元素的左上方
100% 100% : 显示在元素的右下方
50% 50% : 居中
left :靠左
right:靠右
center :将元素显示在水平或垂直方向的中间
top:靠上
bottom:靠下
background-position:left top;
background-position:top left;
background-position:center;

</p>

</body>
</html>2019-02-21

CSS 背景图片 添加 重复和定位。的更多相关文章

  1. CSS背景图片定位

    原文:CSS背景图片定位 在网页开发中我们经常需要对图片进行分割(如下图)来使用,而不是分别提供单独的图片来调用,常见的如页面背景,按钮图标等,这样做的好处就是减少请求次数,节省时间和带宽. 对背景图 ...

  2. Bootstrap css背景图片的设置

    一. 网页中添加图片的方式有两种 一种是:通过<img>标签直接插入到html中 另一种是:通过css背景属性添加 居中方法:水平居中的text-align:center 和 margin ...

  3. css背景图片拉伸 以及100% 满屏显示

    如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在 ...

  4. 【IE6的疯狂之八】链接伪类（:hover）CSS背景图片有闪动BUG

    IE6下链接伪类(:hover)CSS背景图片有闪动BUG,主要原因ie会再一次请求这张图片,或者说图片没被缓存. 例如: CSS代码 a:hover{background:url(imagepath ...

  5. 【转】链接伪类（:hover）CSS背景图片有闪动BUG

    来源:http://www.css88.com/archives/744 --------------------------------------------------------------- ...

  6. vue打包后css背景图片地址找不到

    背景图片变成了这样:static/css/static/imgs/xxx.jpg 解决方法,修改build/utils,添加   publicPath: '../../'    就行 对比了下,com ...

  7. css背景图片加载失败，页面部分图标无法显示

    1.问题表现:首屏缺失部分图标.点击按钮切换为激活状态时,部分按钮的激活态图标无法显示. 2.问题原因:网络极差,断断续续,点击时添加class:active变为激活态, active.png这张图片 ...

  8. div css背景图片不显示

    我们在写页面时,为了便于维护,css样式通常都是通过link外部导入html的,有时在css中写入背景图片时,此时背景图片的路径应该是相对css文件的.比如,此时的文件有index.html,css. ...

  9. 兼容各浏览器的css背景图片拉伸代码

    需要用到背景图拉伸,找到了下面这段css代码: filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='***.jpg' , s ...

随机推荐

  1. copyOf数组复制方法的使用（数组扩容练习）

    package com.Summer_0420.cn; import java.util.Arrays; /** * @author Summer * 我们使用数组存储了50名学生的考试信息 , 今天 ...

  2. Spring Cloud (十四)：Spring Cloud 开源软件都有哪些？

    学习一门新的技术如果有优秀的开源项目,对初学者的学习将会是事半功倍,通过研究和学习优秀的开源项目,可以快速的了解此技术的相关应用场景和应用示例,参考优秀开源项目会降低将此技术引入到项目中的成本.为此抽 ...

  3. Jmeter(三十八)while控制器实现ssh三次重连

    在jmeter中,可以使用SSH协议连接主机进行相关操作, 步骤如下 首先添加一个ssh command  我们的测试交流群:317765580 在command中填写远程连接的必要信息 结果树中可以 ...

  4. shell 小工具

    1.打印进度条(待完善) #!/bin/sh printf -- 'Performing asynchronous action..'; DONE=; printf -- '............. ...

  5. Sql Server中的nvarchar(n)、varchar(n) 和Mysql中的char(n)、varchar(n)

    刚才有幸看了下 nvarchar(n)和varchar(n),感觉以前的认知有误. nvarchar(n):n指的是字符个数,范围是1-4000,存储的是可变长度的Unicode字符数据. 按字符存储 ...

  6. K进制数

    题目描述 考虑包含N位数字的K-进制数. 定义一个数有效, 如果其K-进制表示不包含两连续的0. 考虑包含N位数字的K-进制数. 定义一个数有效, 如果其K-进制表示不包含两连续的0. 例: 1010 ...

  7. 深度学习之概述(Overview)

    2016年被称为人工智能的元年,2017年是人能智能应用的元年:深度学习技术和应用取得飞速发展:深度学习在互联网教育场景也得到广泛应用.本文主要介绍机器学习及深度学习之定义及基本概念.相关网络结构等. ...

  8. JS闭包以及作用域初探

    以前看到的一个问题,很有意思: for (var i = 0; i < 5; i++) { setTimeout(function () { console.log(i); },500); } ...

  9. Python_动态参数、名称空间、作用域、作用域链、加载顺序、函数的嵌套、global、nonlocal

    1.动态参数 当实参数量与形参数量相等时,参数传递正常. def func1(a, b, c): pass func1(1, 2, 3) 当实参数量与形参数量不相等时,则会报错. def func1( ...

  10. echarts图片保存

    一.js: function updateChart(versionList,rateList) { option = { title: { text: '拖动频次' }, tooltip : { t ...