<!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. How to get Pycharm

    PyCharm是一种Python IDE,带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具,比如:代码跳转.智能提示.自动完成.单元测试.版本控制.此外,该IDE提供了一些高级功能, ...

  2. Spring Security（十一）：4. Samples and Guides (Start Here)

    If you are looking to get started with Spring Security, the best place to start is our Sample Applic ...

  3. mybatis之一对多

    今天主要话题围绕这么几个方面? mybatis一对多示例 sql优化策略 一.mybatis之一对多 在说一对多之前,顺便说一下一对一. 一对一,常见的例子,比如以常见的班级例子来说,一个班主任只属于 ...

  4. C++11 并发指南四(<future> 详解二 std::packaged_task 介绍)

    上一讲<C++11 并发指南四(<future> 详解一 std::promise 介绍)>主要介绍了 <future> 头文件中的 std::promise 类, ...

  5. Luogu P4205 [NOI2005]智慧珠游戏

    国内少有的可以练习神仙算法--DLX的好题怎么可以被爆搜埋没呢? 看到这题没有DLX的题解所以写一篇,不过貌似我实现的太弱(构图太慢)所以速度上不是很快. 下面开始讲题,但请保证你要先学会DLX.(d ...

  6. Java多线程学习(四)---控制线程

    控制线程 摘要: Java的线程支持提供了一些便捷的工具方法,通过这些便捷的工具方法可以很好地控制线程的执行 1. join线程控制,让一个线程等待另一个线程完成的方法 2. 后台线程,又称为守护线程 ...

  7. Quartz.NET 任务调度教程。

    https://www.cnblogs.com/yaopengfei/p/9216229.html

  8. unixbench 物理机性能与虚拟机性能测试对比

    1.  测试方法 wget https://download.laobuluo.com/tools/UnixBench5.1.3.tgz tar -zxvf UnixBench5.1.3.tgz cd ...

  9. 简单的词法设计——DFA模拟程序

    实验一.简单的词法设计--DFA模拟程序 一.实验目的 通过实验教学,加深学生对所学的关于编译的理论知识的理解,增强学生对所学知识的综合应用能力,并通过实践达到对所学的知识进行验证.通过对 DFA 模 ...

  10. Bootstrap 栅格 样式 组件 插件

    -----------------------------起先是我们造成习惯,后来是习惯造成我们. day 51 Bootstrap  官方网站:   bootcss.com/ <!DOCTYP ...