css背景background-image
时间:2019-07-19
本文章向大家介绍css背景background-image,主要包括css背景background-image使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 8 .box1{ 9 width: 257px; 10 height:133px; 11 margin: 0 auto; 12 background-color: #bfa; 13 /* 14 使用background-image来设置背景图片 15 语法 background-image:url(相对路径) 16 如果背景图片大于元素,默认会显示图片的左上角 17 如果背景图片的元素一样大,则会将图片全部显示 18 如果背景图片小于元素大小,则会默认将背景图片平铺以充满元素 19 20 可以同时为一个元素指定背景颜色和背景图片 21 这样背景颜色将会作为背景图片的底色 22 一般情况下设置完背景图片时都会同时指定一个背景颜色 23 */ 24 background-image: url(捕获1.PNG); 25 /* 26 background-repeat用于设置背景图片的重复方式 27 可选值 28 repeat 默认值,背景图片会双方向重复(平铺) 29 no-repeat 背景图片不会重复,有多大就显示多大 30 repeat-x 背景图片沿水平方向重复 31 repeat-y 背景图片沿垂直方向重复 32 33 背景元素是默认贴着元素左上角显示 34 通过background-position可以调整背景图片在元素中的位置 35 可选值 36 top right left bottom center中的两个值来指定一个背景图片的位置 37 top left 左上 38 background-position:bottom right 右下 39 background-position:center center 居中 40 如果只给出一个值则第二个值默认是center 41 42 也可以直接指定两个偏移量 43 第一个是 水平偏移量 44 第二个是 垂直偏移量 45 background-position:100px 100px 向左偏移100px 向下偏移100px 46 水平偏移量 如果指定一个正值,则图片会向右移动指定的像素 47 如果指定一个负值,则图片向左移动指定的像素 48 垂直偏移量同理 49 */ 50 background-repeat: no-repeat; 51 } 52 body{ 53 background-image: url(捕获111.PNG); 54 background-repeat: no-repeat; 55 /* 56 background-attachment用来设置背景图片是否随页面一起波动 57 可选值 58 scroll 默认值,背景图片随着窗口波动 59 fixed 背景图片会固定在某一个位置,不随页面波动 60 61 当背景图片的background-attachment设置为fixed时, 62 背景图片的定位永远相对于浏览器的窗口 63 64 不随窗口滚动的图片,一般设置给body,而不设置给其他元素 65 66 */ 67 background-attachment: fixed; 68 } 69 </style> 70 <!--也可以将.box写在CSS中导入 71 <link rel="stylesheet" type="text/css" href="new_file.css" /> 72 --> 73 </head> 74 <body> 75 <div class="box1"></div> 76 </body> 77 </html>
原文地址:https://www.cnblogs.com/zuiaimiusi/p/11215512.html
- WSP Global品牌升级 启用3声母域名
- 一、爬虫基本原理
- python 中__setattr__, __getattr__,__getattribute__, __call__使用方法
- 量子技术与人工智能:同时进化的双生子
- TCP协议三次握手与四次挥手通俗解析
- Silverlight/aspx/ajax/mvc的UI自动化测试
- Office Open XML学习(1)-创建excel文档,并向单元格中插入字符串
- PyMC3和Theano代码构建贝叶斯深度网络,61页PPT探索贝叶斯深度学习以及实现
- 男程序员是不是都不会和女生表达交流?程序员的回答歪了
- Silverlight Telerik控件学习:主题Theme切换
- Silverlight自定义类库实现应用程序缓存
- Silverlight Telerik控件学习:TreeView数据绑定并初始化选中状态、PanelBar的Accordion效果、TabPanel、Frame基本使用
- 这或许是对小白最友好的python入门了吧——4,列表
- 每个人都应该知道的十个机器学习常识
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例